我用它来延迟图像的加载:
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);
}
如果图像尚未缓存(加载图像显示，然后真实图像淡入)，则效果很好。但问题是，如果图像已经被缓存，它们会在页面加载时显示(不显示加载图像)，然后被隐藏并再次淡入，这看起来非常丑陋..
我该如何解决这个问题？我的想法是也许检查图像是否已被缓存，并且仅在没有缓存的情况下才进行淡入淡出...毕竟，淡入淡出只是为了在加载图像和真实图像之间获得更柔和的过渡所必需的。但我该如何检查呢？或者有更好的解决方案吗？
最佳答案
您无法仅使用单个图像从一张图像淡入另一张图像。如果视觉效果还不错，您可以将单个图像从零不透明度淡入完全不透明度。
这是一个示例: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/ .
关于延迟加载后 jQuery 淡入图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12303703/