如何用JavaScript/JQuery统一捕获所有图片onerror事件并设置默认图

手动给每张图片加onerror确实有点繁琐，下面给你两种更高效的实现方式，分别用原生JavaScript和jQuery，都能统一捕获所有图片的加载错误，自动替换为默认图片，甚至还能支持后续动态添加的图片。

原生JavaScript实现 #

这种方法不需要依赖任何库，用事件委托的方式监听所有图片的error事件，不管是页面初始加载的图片还是后来动态插入的图片都能覆盖到：

// 监听document上的img error事件（事件委托）
document.addEventListener('error', function(e) {
  const target = e.target;
  // 判断目标元素是img，且还没设置过 fallback 避免循环报错
  if (target.tagName === 'IMG' && !target.classList.contains('has-fallback')) {
    // 添加标记类，防止默认图也加载失败时无限触发error
    target.classList.add('has-fallback');
    // 替换为默认图片地址
    target.src = 'default.jpg';
    // 可以顺便设置alt提示
    target.alt = '加载失败的默认图片';
  }
}, true); // 第三个参数true表示捕获阶段监听，确保能触发

jQuery实现 #

如果你项目里已经在用jQuery，这种写法会更简洁，同样支持动态添加的图片：

// 用事件委托监听所有img的error事件
$(document).on('error', 'img', function() {
  const $img = $(this);
  // 检查是否已经设置过 fallback
  if (!$img.hasClass('has-fallback')) {
    $img.addClass('has-fallback')
        .attr('src', 'default.jpg')
        .attr('alt', '加载失败的默认图片');
  }
});

注意点 #

• 给图片添加has-fallback类是很重要的：如果你的default.jpg也意外加载失败了，这个类能阻止代码反复触发error事件，避免浏览器卡死。
• 如果你只需要处理页面初始加载的图片，不需要支持动态添加的，也可以直接遍历所有img元素绑定事件：

  // 原生JS遍历初始图片
  document.querySelectorAll('img').forEach(img => {
    img.addEventListener('error', function() {
      if (!this.classList.contains('has-fallback')) {
        this.classList.add('has-fallback');
        this.src = 'default.jpg';
      }
    });
  });
  
  // jQuery遍历初始图片
  $('img').on('error', function() {
    const $img = $(this);
    if (!$img.hasClass('has-fallback')) {
      $img.addClass('has-fallback').attr('src', 'default.jpg');
    }
  });
  

内容的提问来源于stack exchange，提问作者The Bang Bandit