淡入淡出图像但不缓存 [英] Fade image onload but not for cache

问题描述

我想在加载时在页面上淡入图像，但如果此图像尚未存在缓存中 - 只需正常显示即可。
我已经尝试了内联html

 < img onload =$（this）.show（500） /> 
  

和css img {display：none}，但即使此图像已存在于缓存中也会触发。
如何淡入仅存在于缓存中的图像？

解决方案

这应该适用于所有相关浏览器。

在domready上，缓存的图像已经是 complete ，因此 onload 处理程序未设置。

  $（'img.fadeuncached'）。each（function（） {
 if（！this.complete）{
 var $ el = $（this）; 
 $ el.load（function（）{$ el.fadeIn（500）;}）; 
} 
}）; 
  




I want to fade-in images on my page when they load, but if this image is not already in cache - just show it normally. I've tried inline html

<img onload="$(this).show(500)" />

and css img{display:none}, but it fires even if this image is already in cache. How do I fade-in only images, which are not in cache?

解决方案

This should work in all relevant browsers.

On domready, the cached image will be complete already, thus the onload handler is not set.

$('img.fadeuncached').each(function() {
    if(!this.complete) {
        var $el = $(this);
        $el.load(function() { $el.fadeIn(500); });
    }
});

这篇关于淡入淡出图像但不缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！