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

【问题标题】：Load img after load previous image with jquery使用 jquery 加载上一张图片后加载 img
【发布时间】：2013-07-21 14:52:18
【问题描述】：

我想在加载上一张图片后加载 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

【问题讨论】：

你应该使用jquery延迟加载插件

标签： jquery image load

【解决方案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/

【讨论】：

【解决方案2】：

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

img {display:none;}

在js中

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

【讨论】：

对不起，我弄错了
我想在加载 img1 完成时加载 img2
您的代码正在运行，因为您添加了相同的图像，但在他的代码中，他加载了不同的图像。
比使用窗口加载功能
是的，但这不是他想要的。他想加载下一个加载图像，而不是加载窗口...

【解决方案3】：

如果您将图像包含在这样的 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)

【讨论】：