如何修改JavaScript代码，仅替换损坏图片而非正常显示图片？

原代码的问题在于：遍历所有图片时，会误判尚未完成加载的正常图片——这类图片的naturalHeight/naturalWidth也会是0，导致正常图片被错误替换。以下是两种可靠的修改方案：

方案1：监听图片error事件（推荐） #

利用图片加载失败时触发的error事件，仅在加载失败时替换链接，完全不会影响正常加载的图片：

// 处理页面初始存在的图片
$("img").on("error", function() {
  $(this).attr("src", "http://some-photo.blabla.png");
});

// 如需处理后续动态添加的图片，使用事件委托
$(document).on("error", "img", function() {
  $(this).attr("src", "http://some-photo.blabla.png");
});

方案2：页面加载完成后批量检查 #

如果只需要处理页面初始的图片，可在所有资源加载完成后再检查，避免误判未加载完成的正常图片：

$(window).on("load", function() {
  $("img").each(function() {
    // 仅判断已加载但加载失败的图片
    if (!this.complete || (this.naturalHeight === 0 && this.naturalWidth === 0)) {
      $(this).attr("src", "http://some-photo.blabla.png");
    }
  });
});

两种方案的区别：

• 方案1实时响应加载失败事件，支持动态添加的图片，通用性更强。
• 方案2仅在页面完全加载后检查一次，适合不需要处理动态内容的场景。

内容的提问来源于stack exchange，提问作者Rafal