动态创建 img 元素时 onerror 卡死的根本原因是事件未在加载前绑定且降级逻辑未切断；必须在 appendChild 前绑定 onerror 并设为 null 防循环，或用全局捕获监听 + dataset 标记确保状态隔离。
动态创建的 img 元素，onerror 一写就卡死，根本原因是事件没在加载前绑定，或降级逻辑没切断——不是写法不对，而是时机和闭环没控制住。
为什么动态插入后补 onerror 绑定会失效
浏览器在 img 插入 DOM 的瞬间就开始加载 src；如果此时资源不可达（404、跨域、格式错误），错误会在毫秒级触发，而 JS 还没来得及执行 img.onerror = ...，事件就丢失了。
- 用
document.createElement('img')创建后，立刻appendChild()，再赋值onerror→ 大概率来不及 - 即使加了
setTimeout或requestAnimationFrame，也不能保证加载已开始，更不解决重复触发问题 - 内联写法如
onerror="this.src='...'"在innerHTML中插入时，JS 解析执行晚于加载启动，同样无效
正确绑定方式：创建即绑定，且必须切断事件链
必须在 img 实例生成后、插入 DOM 前，完成事件注册和防循环逻辑。核心是两件事：绑定时机 + 状态标记。
- 推荐写法：
const img = document.createElement('img'); img.onerror = () => { img.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiBmaWxsPSIjZmZmIi8+PC9zdmc+'; img.onerror = null; }; document.body.appendChild(img); - 不要用字符串拼接
onerror属性，避免this指向错乱或执行上下文丢失 - 优先用
data:URL 作 fallback，彻底规避路径 404 风险；若必须用网络路径，请确保其绝对可靠（如 CDN 上的静态占位图） - 禁用
this.dataset.loaded判断替代onerror = null？可以，但多一步读写，不如直接清空事件处理器干净
全局监听方案：适合中大型项目统一兜底
当页面大量动态图片、或使用框架（React/Vue）导致手动绑定困难时，用捕获阶段全局监听更鲁棒。
立即学习“前端免费学习笔记（深入）”；
- 关键参数是第三个
true：document.addEventListener('error', handler, true)，确保在冒泡前捕获到img错误 - 必须检查
e.target instanceof HTMLImageElement，避免误处理 script/style 等其他资源错误 - 用
dataset.fallbacked标记已处理过的元素：if (!e.target.dataset.fallbacked) { e.target.src = '/fallback.svg'; e.target.dataset.fallbacked = 'true'; } - 注意：该监听无法捕获
<source></source>加载失败，只对<img alt="HTML动态创建img元素后onerror循环如何避免" >有效；<picture></picture>内部的降级仍需靠<img alt="HTML动态创建img元素后onerror循环如何避免" >的src
容易被忽略的兼容性与路径陷阱
很多“降级失败”其实和 onerror 无关，而是环境或路径配置埋的雷。
-
file://协议下所有图片请求默认被浏览器拦截，报net::ERR_FILE_NOT_FOUND——这不是代码问题，是开发模式限制，必须走本地 server - 跨域图片即使加了
crossorigin，若服务端没配 CORS header，onerror仍会触发，但换源后大概率继续失败 -
alt不是视觉 fallback，它只给读屏器用；空白区域要“看起来正常”，必须靠onerror替换或 CSS 占位 - 不要把
onerror和srcset混用：它只响应最终选中的那个src，不感知响应式逻辑
真正麻烦的从来不是“怎么写 onerror”，而是“什么时候写”和“换完之后怎么确保不再进”。动态图片的降级，本质是加载生命周期的精确卡点 + 状态隔离，漏掉任一环，就可能卡死或白屏。
