2

重複の可能性：
jQueryは画像がロードされているかどうかをチェックします

次のマークアップがある状況があります。

<div class="image">
    <img class="" src="content-images/1.jpg">
    <span class="slide" rel="content-images/2.jpg"></span>
    <span class="slide" rel="content-images/3.jpg"></span>
    <span class="slide" rel="content-images/4.jpg"></span>
</div>

これで、CSSでは、のすべての子div.imageが絶対的に配置されるため、互いに積み重ねられます。

私がやっていることは、特定のトリガーで、ボタンがページ上の別の場所でクリックされたときに、各スパンでに設定された「s」spanを「」に変更することです。画像は大きな高解像度の画像であるため、完全に読み込まれるまでに時間がかかる場合があります。imgsrcrel

javascript / jQueryを使用して、ボタンがクリックされてからすべてspanのが置き換えられるまでの読み込みメッセージ/インジケーターを表示する必要がありますimg。

.load()画像やキャッシュなどの既知の問題のため、jQueryを使用できません。

読み込まれた画像を使用してみましたが、必要な処理が行われていないようです。

あなたが考えることができるこれを行う他の方法はありますか？

4

1 に答える 1

0

それがあなたが達成したいことかどうかはよくわかりませんが、試してみることができます...

$("#button").click(function(){
    console.log("Started loading...");
    // Get all spans to replace, and count them
    var imgSpans = $("div.image span.slide"), 
        toLoad = imgSpans.length,
        loaded = 0;
    // Now load each image
    for (var i = 0; i < toLoad; ++i) {
        // Closure to keep correct value of i
        (function(i){
            // Preload image
            var img = new Image();
            img.src = imgSpans.eq(i).attr("rel");
            img.onload = function(){
                // When loading has finished, replace span with img...
                imgSpans.eq(i).replaceWith(img);
                if (++loaded == toLoad) {
                    // ...and check if all images have been loaded by now
                    console.log("Finished loading...");
                }
            };
        })(i);
    }
});

デモ(JSFiddle)

于 2012-10-06T23:39:10.900 に答える