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

Question

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

小提琴：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. 创建一个Image对象并连接该对象的onload
2. 为其分配源（您要加载的实际图像）
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");
    });

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

Answer 2

任何人都可以提供一种延迟加载图像的解决方案