延迟加载后使用 jQuery 渐显图片

Question

延迟加载后使用 jQuery 渐显图片

3

我使用这个方法来延迟加载我的图片：

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

如果图像尚未被缓存，则此方法运行良好（加载图像后显示真实图像）。但问题在于，如果图像已经被缓存，它们会在页面加载时显示（不显示加载图像），然后再次隐藏和淡入，看起来非常丑陋。

如何解决这个问题？我的想法是，可能要检查图像是否已被缓存，并仅在它们没有被缓存时执行淡入...毕竟，淡入只是为了获得加载图像和真实图像之间更平滑的过渡。但是，我该如何检查这一点？或者还有更好的解决方案吗？

- v1cious

1个回答

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

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

- jfriend00 · Answer 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设置，然后稍后更改它并在新的加载时得到通知，则存在问题。如果您真的想要这种效果，那么您可能需要使用第一张图像的background-image或使用两个彼此重叠的图像对象，在其中淡出第一个图像并淡入第二个图像。

以下是创建第二个图像的示例，以便您可以将其淡出并淡入另一个图像，其中它在加载后立即淡出：http://jsfiddle.net/jfriend00/yvc8d/。

这里是一个稍后根据用户操作淡出的示例：http://jsfiddle.net/jfriend00/LRRRm/。