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

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

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

4

1 回答 1

0

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

这是一个例子：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/。

于 2012-09-06T15:49:52.907 回答