jquery - 使用 jquery 加载上一张图片后加载 img

Question

我想在加载上一张图片后加载 img

    <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

如果您不想加载图像，则不能指定其src属性。相反，仅在前一个图像已加载（或加载失败）时才使用 的属性data-src并使用 JavaScript 编写：src

$(function () {
    $(".bgM").on("load error", function () {
        loadImg($(this).next(".bgM"));
    });
    loadImg($(".bgM").first());
});

function loadImg(img) {
    img.prop({ src: img.data("src") });
}

http://jsfiddle.net/NKLTE/2/

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)

Answer 3

使用这个 http://jsfiddle.net/c2N5U/ css

img {display:none;}

在js中

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