无需内联事件处理器的跨浏览器<img>标签损坏检测方案

一、解决error事件绑定不触发的问题 #

你遇到的事件未触发，大概率是因为图片的加载事件在你绑定监听前就已经完成了。针对这种情况，有两种可靠的处理方式：

1. 动态创建图片，先绑事件再设src

通过临时Image对象预加载图片，确保事件监听在请求发起前就已绑定，不会错过error/load事件：

function loadImageWithFallback(targetImg, src, fallbackSrc) {
  const preloadImg = new Image();
  
  // 先绑定事件处理器
  preloadImg.addEventListener('error', () => {
    targetImg.src = fallbackSrc;
  });
  preloadImg.addEventListener('load', () => {
    targetImg.src = src;
  });
  
  // 最后设置src触发请求
  preloadImg.src = src;
}

// 调用示例
const myImg = document.getElementById('user-avatar');
loadImageWithFallback(myImg, '/path/to/avatar.jpg', '/path/to/default-avatar.png');

2. 针对已存在的DOM图片，先检查加载状态

如果图片已经在页面中，先判断它是否已经加载完成，再决定是直接验证还是绑定事件：

function setupImageFallback(img, fallbackSrc) {
  // 图片已加载完成的情况
  if (img.complete) {
    validateAndReplace(img, fallbackSrc);
  } else {
    // 绑定事件，加载完成后验证
    img.addEventListener('error', () => {
      img.src = fallbackSrc;
    });
    img.addEventListener('load', () => {
      validateAndReplace(img, fallbackSrc);
    });
  }
}

// 验证图片是否有效（核心逻辑）
function validateAndReplace(img, fallbackSrc) {
  // 自然宽高为0，说明图片解析失败（空文件、损坏格式等）
  if (!img.naturalWidth || !img.naturalHeight) {
    img.src = fallbackSrc;
  }
}

// 批量处理页面所有图片
document.querySelectorAll('img').forEach(img => {
  setupImageFallback(img, '/path/to/default-image.png');
});

二、处理空文件/损坏但HTTP请求成功的场景 #

你补充提到的「服务器返回200但文件为空/损坏」的情况，确实不会触发error事件——因为浏览器认为HTTP请求成功了，只是解析图片数据时失败。这时候可以通过naturalWidth和naturalHeight属性判断：

• 正常有效的图片，naturalWidth和naturalHeight至少有一个大于0；
• 空文件、格式损坏的图片，这两个值会是0。

这个属性的兼容性很好，IE9及以上、所有现代浏览器都支持，完全满足跨浏览器需求。

关键注意事项 #

• 避免重复替换：替换为默认图后，要确保不会再次触发load/error事件（比如默认图地址要确保有效，或者在替换后移除事件监听）；
• 跨域图片：如果图片是跨域的，部分浏览器可能会限制naturalWidth/naturalHeight的读取，这时候需要服务器配置CORS允许图片跨域访问。

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