延迟加载后的jQuery淡入图像答案

【问题标题】：jQuery fade-in images after delayed loading延迟加载后的jQuery淡入图像
【发布时间】：2012-09-06 15:43:16
【问题描述】：

我正在使用它来延迟我的图像的加载：

HTML：

<img src="loading.gif" delayedSrc="url/to/real/image.png" />

jquery:

image.attr('src', currentImage.attr('delayedSrc'));

现在加载完成后，如果希望它淡入，而不是仅仅从 loading.gif 切换到真实图像。我试过了：

image.attr('src', currentImage.attr('delayedSrc')).load(function() {
    image.hide().fadeIn(1000);
}

如果图像尚未缓存（加载 iamge 节目，然后真实图像淡入），这将正常工作。但问题是，如果图像已经被缓存，它们会在页面加载时显示（没有显示加载图像），然后被隐藏并再次淡入，这看起来很丑陋..

我该如何解决这个问题？我的想法可能是检查图像是否已被缓存，并且只有在没有缓存的情况下才进行淡入淡出......毕竟淡化只是在加载图像和真实图像之间获得更柔和的过渡所必需的。但我该如何检查呢？还是有更好的解决方案？

【问题讨论】：

标签： jquery image loading fadein delay

【解决方案1】：

您不能仅使用一张图像从一张图像淡入另一张图像。如果效果不错，您可以将单个图像从零不透明度淡化为完全不透明度。

这是一个例子：http://jsfiddle.net/jfriend00/38Afs/

HTML：

<img class="delayImg" delayedSrc="http://photos.smugmug.com/photos/344291068_HdnTo-L.jpg" />

CSS：

.delayImg {opacity:0;}

Javascript：

$(document).ready(function() {
    $(".delayImg").each(function() {
        this.onload = function() {
            $(this).animate({opacity: 1}, 2000);
        };
        this.src = this.getAttribute("delayedSrc");
    });
});

注意：当您更改 .src 时，onload 不会在所有浏览器中可靠地触发，只有在第一次设置时才会触发，因此设置初始图像 .src 并稍后更改它并收到通知是一个问题当新的加载。如果您真的想要这种效果，那么您可能需要将背景图像用于第一张图像，或者使用两个图像对象叠加在一起，使第一个图像淡出，第二个淡入淡出。

这是一个创建第二张图片的示例，这样您就可以在加载后立即淡出另一张图片：http://jsfiddle.net/jfriend00/yvc8d/。

这是稍后在用户操作后消失的一个：http://jsfiddle.net/jfriend00/LRRRm/。

【讨论】：

使用背景图片和不透明度可以解决问题，谢谢！