img加载图片失败时，使用默认图片

发表于 2016-11-26 更新于 2024-11-21 分类于前端本文字数： 141 阅读时长 ≈ 1 分钟

默认情况下，当图片加载失败时会显示一个小图标，这是非常影响页面效果和用户体验的，所以为图片设置如果加载失败显示图片非常有必要

img标签自带onError属性，当图片加载失败时，触发error事件：

1	<img src="image.png" onError='this.src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"' />

1
2
3

$('img').error(function(){
    $(this).attr('src',"http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg");
});

使用onerror或者jQuery的error事件时，如果默认图片也发生加载失败，则会形成死循环，最好的办法是使用one绑定事件，只执行一次

1
2
3

$("img").one("error", function(e){
     $(this).attr("src", "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg");
});