js判断图片是否完全加载的方法(jquery的error事件妙用)

最新推荐文章于 2024-04-23 12:49:36 发布

原创最新推荐文章于 2024-04-23 12:49:36 发布 · 985 阅读

0 ·

CC 4.0 BY-SA版权

JS-原生专栏收录该内容

2 篇文章

订阅专栏

文章详细介绍了在网页中利用jQuery的error事件监听图片加载错误，并通过循环更新图片源地址直至成功加载的方法。同时，讨论了传统判断图片加载状态方式的局限性和内存消耗问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面上，如何判断图片是否完全加载？

有时候，当用js动态获取服务器图片的时候，可能图片在服务器是不可用状态，这是需要重新获取。但是在页面，用什么方法判断图片是否完全加载了呢？期间LZ尝试了多种方法，最后得到了一种比较合理的方案。

因为，在jQuery中有一个error事件,可以通过绑定图片的error事件来监听图片是否完全加载。

$(document).ready(function() { 
        
$('#pbcimg').error(function(){ 
      
var src=$(this).attr("src"); 
      
$(this).attr("src", src +
"?noCache=" + 
new Date().valueOf());  
        
});  
);

这样,在给<img/>动态指定src的时候，若出错，则会循环触发此事件，直到图片正确加载。

探寻之路：

之前是通过判断 img.readystate=="complete"||img.readystate=="loaded" 和 img.complete==true 的状态，再使用setTimeOut()来定时改变<img/>的src，但是这些属性有浏览器差异，有的浏览器无法获取到这些属性，从而导致不能及时clearTimeOut()来清除定时器。所以，这样浏览器将一直运行此定时。时间过长的话，将导致内存消耗太大。