我使用这个方法来延迟加载我的图片:
HTML:
jQuery:
现在当加载完成时,我想让真实图片淡入而不只是从loading.gif直接切换到真实图片。我尝试过:
如果图像尚未被缓存,则此方法运行良好(加载图像后显示真实图像)。但问题在于,如果图像已经被缓存,它们会在页面加载时显示(不显示加载图像),然后再次隐藏和淡入,看起来非常丑陋。
如何解决这个问题?我的想法是,可能要检查图像是否已被缓存,并仅在它们没有被缓存时执行淡入...毕竟,淡入只是为了获得加载图像和真实图像之间更平滑的过渡。但是,我该如何检查这一点?或者还有更好的解决方案吗?
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);
}
如果图像尚未被缓存,则此方法运行良好(加载图像后显示真实图像)。但问题在于,如果图像已经被缓存,它们会在页面加载时显示(不显示加载图像),然后再次隐藏和淡入,看起来非常丑陋。
如何解决这个问题?我的想法是,可能要检查图像是否已被缓存,并仅在它们没有被缓存时执行淡入...毕竟,淡入只是为了获得加载图像和真实图像之间更平滑的过渡。但是,我该如何检查这一点?或者还有更好的解决方案吗?