网页图片加载错误的处理

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

<img src="图片地址" onerror="this.src='替换图片地址'"/>

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

this.onerror=none;

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

$("img").each(function (index,ele) {
     $(ele).one("error",function () {
         $(this).attr("src","替换图片地址");
     })
});

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