图片加载失败会触发error事件，可在document上用捕获阶段监听（第三个参数设为true），从而全局捕获所有img元素的加载错误，无需逐个绑定；该事件仅在明确加载失败（如404、跨域拒绝）时触发，需配合mutationobserver和performanceobserver补全动态插入与懒加载场景。
图片加载失败（白块）无法触发 load 事件，但会触发 error 事件——该事件支持捕获阶段，因此可在全局（如 document 或 window）用捕获方式监听，无需为每个 <img> 单独绑定。
利用 document.addEventListener 的捕获模式监听 img error
图片的 error 事件会冒泡，也支持捕获。在 document 上以捕获方式监听，能拦截所有后代 <img> 元素的加载失败：
- 必须将第三个参数设为
true（启用捕获） - 事件目标
event.target是出错的<img>元素，可读取其src、alt、父容器等上下文 - 建议在 DOM 加载完成后注册（如
DOMContentLoaded），避免遗漏动态插入的图片
document.addEventListener('error', function (e) {
if (e.target instanceof HTMLImageElement && !e.target.src) {
console.warn('图片 src 为空:', e.target);
}
if (e.target instanceof HTMLImageElement && e.target.src && e.target.src !== 'data:') {
console.error('图片加载失败:', {
src: e.target.src,
alt: e.target.alt,
referrer: document.referrer,
timestamp: Date.now()
});
// 可在此上报错误、替换占位图、打点统计等
}
}, true); // 注意：true 表示捕获阶段
注意 error 事件的触发时机与限制
error 事件只在资源**明确加载失败**时触发（如 404、跨域拒绝、格式错误、网络中断），不是所有“白块”都会触发：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 若
<img src="">或src="undefined"，部分浏览器不触发error，需额外检查src有效性 - 使用
data:URI 加载失败一般不触发error（取决于浏览器实现） - CORS 图片若未设置
crossorigin属性，加载失败时可能无法读取src（安全限制），此时e.target.src可能为空字符串或被屏蔽 - 服务端返回 200 但内容非图片（如 HTML 错误页），部分浏览器仍会触发
error，部分不会——行为不统一，需结合服务端日志交叉验证
增强监控：补充动态图片与懒加载场景
单靠全局捕获不能覆盖所有情况，尤其 SPA 中大量动态创建的图片或使用 loading="lazy" 的元素：
- 对通过 JS 创建的
new Image()实例，需手动绑定onerror，它不经过 DOM 事件流 - 监听
MutationObserver捕获后续插入的<img>，确保新节点也被纳入监控范围 - 对
loading="lazy"图片，error仍会正常触发，无需特殊处理；但首次进入视口前不会加载，因此错误也延后发生 - 可配合 PerformanceObserver 监听
resource类型，过滤initiatorType === 'img'且responseEnd === 0的条目，作为error事件的补充信号
实用建议：错误归因与降级策略
仅捕获错误不够，关键在快速定位原因并缓解影响：
- 记录
document.referrer和当前location.href，区分是外链跳转引入的坏链接，还是自身页面逻辑问题 - 对失败图片，可自动替换为兜底图：
e.target.src = '/assets/img/placeholder.png';（注意避免重复触发） - 上报时带上用户设备信息（
navigator.userAgent、devicePixelRatio）、网络类型（navigator.connection?.effectiveType），辅助判断是否与弱网或高清屏适配有关 - 避免在
error回调中执行重试逻辑（如反复赋值src），易导致循环或内存泄漏；推荐节流后统一重试队列
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
