对于网站图像的不显示有很多原因,网络问题,文件本身问题,文件URL问题等,而当图像加载失败时会触发onerror这个事件,我们利用这点,可以有效的避免图像加载失败的尴尬!
<img src="/imgages/headimg/10000011.jpg" οnerrοr="javascript:this.src='/images/default.jpg'"/>
这里直接写一个内联的方法 但是这样在页面项目十分多的时候 十分不方便 更改图片也 有些费劲
一般个人推荐在公用方法里推出Img onerror方法
html代码
<img width="32" height="32" src="1.jpg" οnerrοr="errorImg(this)" />
js代码
//图像加载出错时的处理
function errorImg(img) {
img.src = "http://static.xuexiba.com/uploadfile//UserInfo/Avatar/201403/1303992393385832875324.jpg";
img.onerror = null;
}
因为 万一 你前面的 img.src 中的图片 也找不到了
所以 避免重复触发 onerror 函数 所以 这时 给 img.onerror = null 避免无限循环 卡死