jquery - jqueryで前の画像を読み込んだ後に画像を読み込む

Question

前の画像を読み込んだ後に画像を読み込みたい

    <img src="~/images/bg1.jpg" id="img1" class="bgM" />
    <img src="~/images/bg1.jpg" id="img2" class="bgM" />
    <img src="~/images/bg3.jpg" id="img3" class="bgM" />
    <img src="~/images/bg4.jpg" id="img4" class="bgM" />

img1の読み込みが終わったらimg2を読み込みたいです。

最初に #img1 を読み込み、次に #img2 を読み込み、その後 #img2 を読み込み、#img3 を読み込み、次に #img4 を読み込みます

Answer 1

この http://jsfiddle.net/c2N5U/ cssを使用してください

img {display:none;}

jsで

$(window).load(function(){
       $("img").each(function(index) {
        $(this).delay(400*index).fadeIn(300);
    });
 });

Answer 2

そのようなdivに画像を含める場合：

<div id="images">
    <img src="~/images/bg1.jpg" id="img1" class="bgM" />
    <img src="~/images/bg1.jpg" id="img2" class="bgM" />
    <img src="~/images/bg3.jpg" id="img3" class="bgM" />
    <img src="~/images/bg4.jpg" id="img4" class="bgM" />
</div>

次の画像をロードするために画像がロードされるのを実際に待機するこの jquery コードを使用できます。

function loadImage(i) {
    $('<img src="~/images/bg'+i+'.jpg id="img'+i+'" class="bgM" />').appendTo("#images").fadeOut(0).fadeIn(500, function(){
        if (i < 4) {
            loadImage(i + 1)
        }
    })
}

loadImage(1)