在使用 jQuery 加载图像之前显示加载图像？

Question

我在 SO 上关注了几个不同的类似问题，但由于某种原因它不起作用。有人可以帮我理解为什么吗？我希望加载图像首先显示，然后在加载更大的图像时淡出。较大的图像应该淡入。

Fiddle: http://jsfiddle.net/95rpu029/2/

HTML

<article class="project">
    <img width="375" height="375" src="http://dummyimage.com/375x375/000/fff" class="attachment-home-thumb">
</article>

JS

// Show loading image
$('article').prepend('<span class="loading-icon"><img src="http://i.imgur.com/lJpvTU3.gif" height="32" width="32" alt="Loading..."></span>');

// main image loaded ?
$('article img').on('load', function(){
    // hide/remove the loading image
    $('.loading-icon').fadeOut();
    $('article').show();
});

CSS

article.project {
    display: none;
    float: left;
    margin: 0 1% 2%;
    max-width: 375px;
    overflow: hidden;
    position: relative;
    width: 23%;
}

article.project img {
    display: block;
    margin: 0;
    padding: 0;
    max-width: 100%;
    height: auto;
}

Answer 1

发生这种情况是因为您的测试图像非常小，并且在您的代码有机会 运行 之前它已经加载。所以 load 没有被触发（因为图像已经加载）。我对您的代码做了小改动并更新了 fiddle。变化如下：

1. 在开始时显示加载程序图像
2. 创建一个 Image 对象并连接 onload 这个对象
3. 为其分配来源（您要加载的实际图像）

4. 当事件发生时，将源分配给原始图像

   var im = new Image();
   im.onload = function () {
       $("#img2Replace")[0].src = im.src;
   };
   im.src = "http://dummyimage.com/375x375/000/fff";
   

那么现在我们必须对每张图片执行此操作：

    var imgs = $("article.project img.attachment-home-thumb");
    $.each(imgs, function () {
        var $this = $(this);
        var im = new Image();
        im.onload = function () {
            var theImage = $this;
            $this.hide("slow");
            theImage[0].src = im.src;
            $this.show('fast');
        };
        im.src = $this.data("mainsrc");
    });

请注意，为了模拟加载实际图像的延迟，我在 fiddle 中使用了 setTimeout。