前端的图像错误优化

对于网站图像的不显示有很多原因，网络问题，文件本身问题，文件ＵＲＬ问题等，而当图像加载失败时会触发onerror这个事件，我们利用这点，可以有效的避免图像加载失败的尴尬！ 

 

<img src="/imgages/headimg/10000011.jpg" onerror="javascript:this.src='/images/default.jpg'"/>

 这里直接写一个内联的方法   但是这样在页面项目十分多的时候  十分不方便  更改图片也 有些费劲

一般个人推荐在公用方法里推出Img onerror方法

html代码

<img width="32" height="32" src="1.jpg" onerror="errorImg(this)" /> 

js代码

//图像加载出错时的处理 
function errorImg(img) { 
img.src = "http://static.xuexiba.com/uploadfile//UserInfo/Avatar/201403/1303992393385832875324.jpg"; 
img.onerror = null; 
} 

为什么  还要在后面加入 img.onerror = null 哪   

因为 万一  你前面的 img.src 中的图片 也找不到了 

所以 避免重复触发 onerror 函数  所以 这时 给 img.onerror = null  避免无限循环 卡死