当页面中图片加载失败时,显示默认图片

一、首先我们知道显示一张图片,通过访问图片的地址,如果地址正确就显示地址正确的图片,如果不正确图片就会加载失败

如果想要在图片加载失败时显示我们的默认图片,只需要img标签就可以搞定

这里需要了解一下img标签中的onerror ,onAbort,onLoad事件

onError:当图片加载出现错误,会触发 经常在这里事件里头写入 将图片导向默认报错图片,以免页面上出现红色的叉叉

onLoad:事件是当图片加载完成之后触发

onAbort:图片加载的时候,用户通过点击停止加载(浏览器上的红色叉叉)时出发,通常在这里触发一个提示:“图片正在加载”

 

好的,进入正题,当我们图片加载失败时就需要连接另一个图片(我们默认图片地址);

html:

js:

//注册加载失败事件,再次加载时先重新设置url,在清空原先的注册加载失败事件
$("img").attr("onerror","this.src=this.onerror=null;this.src='默认图片的url地址'");
//遍历img标签,再次重新加载
$("img").each(function(){
     this.src = this.src;
});

我们在显示默认图片时,要先将其变为空,在传入我们的默认图片地址;不然浏览器有时会报错;

注意:一定要先将其变为空,然后在给地址,不然的话,将会陷入无限循环中,图片将会被无限次加载

你可能感兴趣的:(当页面中图片加载失败时,显示默认图片)