网页图片加载错误的处理

2022-07-13 17:30:32 浏览数 (1)

在网站中,经常会遇到一种情况,很多图片要么因为图片地址本身指向一个未知地址(404地址),要么因为图片服务器自身的原因未能给img返回正确的图片文件流,就会导致图片错误或者alt信息,如果没有给相应的img设置宽高,甚至还会影响整个页面的布局,针对以上问题,我们可以采用监听图片的error事件然后做相应的处理。如:

代码语言:javascript复制
<img src="图片地址" onerror="this.src='替换图片地址'"/>

按正常逻辑,上面的处理不会有问题,但是容易忽略一种情况,那就是替换的图片地址如果也不存在,那onerror里面的代码就会反反复复地执行,直到请求到图片为止,如果一直请求不到,那就相当于一个死循环了。对此,对以上代码添加一行代码

代码语言:javascript复制
this.onerror=none;

在执行完第一次图片替换后,取消图片的error事件监听。上面的代码如果用jquery实现就是下面这样

代码语言:javascript复制
$("img").each(function (index,ele) {
     $(ele).one("error",function () {
         $(this).attr("src","替换图片地址");
     })
});

用one绑定的事件只会执行一次,所以不会出现死循环的情况

0 人点赞