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

Question

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

3

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

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;
}

- J82

你似乎已经完成了，问题出在哪里？ - joydesigner

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TheVillageIdiot · Accepted Answer

这是因为您的测试图片非常小，在您的代码有机会运行之前已经加载完毕。因此，load事件不会触发（因为图片已经加载完毕）。我对您的代码进行了小修改，并更新了fiddle。更改如下：

show loader image at start
create an Image object and wire onload of this object
assign it source (the actual image that you want to load)

when event occurs, assign source to original image

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。