防止onerror死循环的关键是先清除监听再换源：内联写法用this.onerror=null; this.src='fallback.jpg'，事件监听需具名函数并显式removeEventListener。
onerror 触发后直接设置 src 会再次触发 onerror
这是最常见的死循环根源：在 onerror 回调里没做任何防护，就直接给 img.src 赋一个新值（比如备用图），而这个新地址又加载失败，就会再次触发 onerror，无限递归下去。浏览器可能卡顿甚至崩溃，控制台反复报 GET xxx 404 或 net::ERR_FAILED。
关键不是“怎么重置”，而是“怎么防止第二次触发”。必须阻断后续错误事件的传播路径：
- 在
onerror回调第一行立刻移除当前的onerror处理函数（用img.onerror = null或img.removeEventListener('error', handler)） - 再设置
src—— 此时即使新地址也失败，也不会再进这个回调 - 如果要用事件监听器（而非内联
onerror），务必确保removeEventListener的函数引用和绑定时完全一致（不能用匿名函数）
使用内联 onerror 时如何安全 fallback
最简场景下，直接在 HTML 里写 onerror，推荐用一行内联赋值清空自身：
<img src="broken.jpg" onerror="this.onerror=null; this.src='fallback.jpg';">
注意两点：
立即学习“前端免费学习笔记（深入）”；
-
this.onerror=null必须放在this.src=...前面，顺序不能反 - 不要写成
this.onerror=undefined或delete this.onerror，只有null才能可靠解除绑定 - 如果
fallback.jpg本身也不存在，页面只会显示空白或浏览器默认缺失图标，但不会重复报错或卡住
用 addEventListener 绑定时怎么避免循环
当需要复用逻辑、或统一管理图片错误时，必须用具名函数 + 显式移除：
function handleImageError(e) {<br> const img = e.target;<br> img.removeEventListener('error', handleImageError);<br> img.src = '/images/placeholder.png';<br>}<br><br>document.querySelectorAll('img').forEach(img => {<br> img.addEventListener('error', handleImageError);<br>});
常见错误写法：
- 用箭头函数绑定：
img.addEventListener('error', (e) => {...})→ 无法在回调里准确remove - 忘记移除：
img.src = ...后不调用removeEventListener，下次错误仍会进来 - 移除时传错函数名，比如写成
removeEventListener('error', handleImgError)（拼写不一致）
服务端返回 200 但内容为空也会触发 error
有些 CDN 或代理在资源不存在时返回 200 状态码，但响应体是 HTML 错误页（如“Not Found”文本）或空内容。浏览器解析时发现不是有效图片格式，依然会触发 onerror。这种情况下，前端无法靠状态码判断，只能依赖事件本身。
应对方式不变：依然要第一时间清除 onerror 监听，再换源。但需额外注意：
- 备用图地址最好走独立域名或静态资源 CDN，避免同个故障点全挂
- 可加一层简单校验：比如先 fetch 备用图 URL，检查 response.headers.get('content-type') 是否含
image/，再决定是否赋值（但会增加延迟，慎用） - 真正健壮的做法是服务端保证 404 图片资源存在且可用，前端只做兜底
最易被忽略的是：很多人以为只要 src 改了就万事大吉，却没意识到事件监听器还挂着——哪怕只失败一次，后续所有错误都会进同一个回调，直到手动清理。
