图片加载错误时显示默认图片

2015-11-27 Oliver Wang 更多博文 » 博客 » GitHub »

原文链接 http://ochukai.me/show-a-default-image-when-the-image-is-broken/
注：以下为加速网络访问所做的原文缓存，经过重新格式化，可能存在格式方面的问题，或偶有遗漏信息，请以原文为准。

直接写

function imgError(image) {
    image.onerror = null; // prevent event bubble
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

使用 jQuery

$("img").error(function () {
    $(this).unbind("error").attr("src", "broken.gif");
});

//If you use this technique you can use the "one" method to avoid needing to unbind the event: 
$('img').one('error', function() { 
  this.src = 'broken.gif'; 
});

还有一种写法

$(window).load(function() {
  $('img').each(function() {
    if (!this.complete 
        || typeof this.naturalWidth == "undefined" 
        || this.naturalWidth == 0) {
      // image was broken, replace with your new image
      this.src = 'broken.gif';
    }
  });
});