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 load＃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)

Answer 3

如果您不想加载图片，则无法指定其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/

使用jquery加载上一个图像后加载img

3 个答案: