Occupato condizione di indicatore di corsa in Javascript

Question

Ho il seguente codice (JavaScript / jQuery) per mostrare un indicatore di occupato (dopo un ritardo) mentre un'immagine è carico:

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

A volte, l'indicatore si avvicina e soggiorni fino. Come è possibile se il motore JavaScript del browser è single-threaded? (Questo è su Firefox 3, tra l'altro.)

Una nota: questo sembra accadere quando l'immagine viene caricata già nella cache

.

Un'altra nota:. Se accedo al mio console Firebug, tutte le linee in imgUpdate vengono eseguiti, ma un messaggio di log all'interno del gestore onload mai stampe su convocazioni successive alla imgUpdate

Answer 1

Cancellazione tag src dell'immagine sembra risolvere il 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

C'è qualche altro javascript nella pagina che si rompe? Se è così, questo non può essere una condizione di competizione - JS potrebbe semplicemente smettere di esecuzione prima della busyIndicator è nascosto ancora una volta ...

Answer 3

Sto molto difficile riuscire a replicare questo.

Ecco l'attuazione di quello che stai facendo:

Una versione utilizzando la cache: http://jsbin.com/uwuho

Una versione con la cache viene impedito: (utilizza il parametro per evitare la memorizzazione nella cache) http://jsbin.com/oguvi

Hit F5 / Ctrl-F5 per vederlo andare. (In particolare con la versione che impedisce caching)

Con o senza la memorizzazione nella cache nessuna delle due versioni sta facendo quello che ci ha descritto.

Il tuo problema probabilmente è un altro.

Answer 4

Si potrebbe voler cancellare il timeout nella richiamata in modo che non si attiva se l'immagine viene caricata.

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