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

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

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

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

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

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

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

 

好的，进入正题，当我们图片加载失败时就需要连接另一个图片（我们默认图片地址）；

html:

<img src="图片的url地址" alt="">

js:

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

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

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