condition de course indicateur d'occupation en Javascript

Question

Je le code suivant (javascript / jquery) pour afficher un indicateur d'occupation (après un délai) alors qu'une image est en cours de chargement:

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;
}

Parfois, l'indicateur arrive et reste en haut. Comment est-ce possible si est monothread moteur javascript du navigateur? (Ceci est sur Firefox 3, par le chemin.)

Une note: cela semble se produire lorsque l'image en cours de chargement est déjà mis en cache

.

Une autre note. Si je me connecte à ma console Firebug, toutes les lignes imgUpdate sont exécutées, mais un message de journal dans le gestionnaire onload imprime jamais sur les appels suivants à imgUpdate

Answer 1

Effacement de la balise src de l'image semble résoudre le problème:

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

Y at-il autre javascript sur la page qui casse? Si oui, ce ne peut pas être une condition de course - JS pourrait simplement cesser d'exécuter avant la busyIndicator est à nouveau caché ...

Answer 3

Je suis en peine de reproduire cela.

Voici la mise en œuvre de ce que vous faites:

Une version mise en cache à l'aide: http://jsbin.com/uwuho

Une version mise en cache étant empêchée: (paramètre utilise pour éviter la mise en cache) http://jsbin.com/oguvi

Appuyez sur F5 / Ctrl-F5 pour voir disparaître. (En particulier avec la version qui empêche la mise en cache)

Avec ou sans mise en cache ni la version fait ce que vous aviez décrit.

Votre problème probablement est ailleurs.

Answer 4

Vous pouvez effacer le délai d'attente dans votre rappel afin qu'il ne se déclenche pas si l'image est chargée.

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;
}