condição indicador corrida movimentada em Javascript

Question

Eu tenho o seguinte código (javascript / jQuery) para mostrar um indicador de ocupado (depois de um atraso) enquanto uma imagem é de carregamento:

function imgUpdate(arg) {
    var loaded = false;

    $("#image").one("load", function(){
        loaded = true;
        $("#busyIndicator").hide();
    });

    setTimeout(function(){
        if (!loaded) {
            $("#busyIndicator").show();
        }
    }, 250);

    $("#image")[0].src = arg;
}

Às vezes, o indicador aparece e permanece acima. Como isso é possível se o motor JavaScript do navegador é single-threaded? (Este é no Firefox 3, pela maneira.)

Uma nota:. Isto parece acontecer quando a imagem que está sendo carregado já está em cache

Outra nota:. Se eu fizer logon para o meu console do Firebug, todas as linhas em imgUpdate são executados, mas uma mensagem de log dentro do manipulador onload nunca imprime em chamadas subseqüentes para imgUpdate

Answer 1

Apagar tag src da imagem parece para corrigir o problema:

function imgUpdate(arg) {
    var loaded = false;

    $("#image").one("load", function(){
        loaded = true;
        $("#busyIndicator").hide();
    });

    setTimeout(function(){
        if (!loaded) {
            $("#busyIndicator").show();
        }
    }, 250);

    $("#image")[0].src = "";
    $("#image")[0].src = arg;
}

Answer 2

Existe algum outro javascript na página que breaks? Se assim for, isso pode não ser uma condição de corrida - JS poderia simplesmente parar a execução antes do busyIndicator está escondido novamente ...

Answer 3

Estou muito pressionado para replicar isso.

Aqui é a implementação de que você está fazendo:

A versão usando o cache: http://jsbin.com/uwuho

Uma versão com cache sendo impedidos: (usos parâmetro para caching evitar) http://jsbin.com/oguvi

Hit F5 / Ctrl-F5 para vê-lo ir. (Em especial com a versão que Evita cache)

Com ou sem cache nenhuma versão está fazendo o que você descreveu.

Seu problema provavelmente está em outro lugar.

Answer 4

Você pode querer limpar o tempo de espera em seu retorno para que ele não vai a incêndios, se a imagem é carregada.

var timer = null;
function imgUpdate(arg) {
    var loaded = false;
    timer = setTimeout(function(){ 
        $("#busyIndicator").show();
        timer = null;
    }, 250);        
    $("#image").one("load", function(){
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        $("#busyIndicator").hide();
    });
    $("#image")[0].src = arg;
}