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

onError属性

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

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

jQuery的error事件

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

jQuery的one绑定

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

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

注:

  • 另外error事件,不支持冒泡,jquery.delegate函数捕捉不到error事件。