2

次の（javascript / jquery）コードを使用して、画像の読み込み中にビジーインジケーター（遅延後）を表示します。

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

場合によっては、インジケーターが表示されたままになります。ブラウザのjavascriptエンジンがシングルスレッドの場合、これはどのように可能ですか？（ちなみに、これはFirefox 3にあります。）

注：これは、読み込まれている画像がすでにキャッシュされている場合に発生するようです。

別の注意：firebugコンソールにログインすると、imgUpdateのすべての行が実行されますが、onloadハンドラー内のログメッセージは、後続のimgUpdateの呼び出しで出力されません。

4

4 に答える 4

1

私はこれを再現するのに苦労しています。

これがあなたがしていることの実装です：

キャッシュを使用するバージョン：http： //jsbin.com/uwuho

キャッシングが防止されているバージョン:(キャッシングを回避するためにパラメーターを使用） http://jsbin.com/oguvi

F5 / Ctrl-F5を押して、移動を確認します。（特にキャッシュを防止するバージョンの場合）

キャッシュの有無にかかわらず、どちらのバージョンもあなたが説明したことを実行していません。

あなたの問題はおそらく他の場所にあります。

于 2009-05-21T15:00:40.820 に答える
1

ページ上に壊れている他のJavaScriptはありますか？もしそうなら、これは競合状態ではない可能性があります-busyIndi​​catorが再び非表示になる前にJSは単に実行を停止する可能性があります...

于 2009-05-21T15:02:01.537 に答える
1

画像の src タグをクリアすると問題が解決するようです:

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;
}
于 2009-05-21T15:46:12.493 に答える
0

画像がロードされた場合に起動しないように、コールバックのタイムアウトをクリアしたい場合があります。

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;
}
于 2009-05-21T15:09:09.900 に答える