Question

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

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 。变化如下：

开始时显示装载程序图像
创建一个Image对象并连接此对象的onload
分配源（您要加载的实际图像）

发生事件时，将源指定给原始图像 <击>

<击>

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。

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

1 个答案: