Question

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

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显示，然后真实图像淡入），这样可以正常工作。但问题是，如果图像已经被缓存，它们会在页面加载时显示（没有显示加载图像），然后被隐藏并再次淡入，这看起来很丑......

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

Answer 1

您只能使用一张图片从一张图片淡入另一张图片。如果该效果是OK视觉效果，您可以将单个图像从零不透明度淡化为完全不透明度。

以下是一个示例：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");
    });
});

注意：当您更改onload时，.src将无法在所有浏览器中可靠地触发，只有在首次设置时才会触发，因此设置初始图像.src会出现问题稍后更改它并在加载新的时通知。如果你真的想要那个效果，那么你可能需要使用背景图像作为第一个图像，或者使用两个图像对象在另一个上面淡出第一个图像并淡入第二个图像。

以下是创建第二张图片的示例，以便您可以在加载后逐渐淡出一张，另一张淡出淡出的地方：http://jsfiddle.net/jfriend00/yvc8d/。

以下是用户操作稍后消失的地方：http://jsfiddle.net/jfriend00/LRRRm/。

延迟加载后jQuery淡入图像

1 个答案: