onerror在轮播中触发无限循环的根源是fallback图加载失败后事件未被切断，导致浏览器持续重试同一失效src。必须在设置src前绑定onerror、使用{once:true}或手动置null，并采用内联SVG base64占位图确保零依赖。
onerror在轮播中触发无限循环的根源
轮播图切换时 onerror 反复执行、页面卡死或内存暴涨，根本不是图片“多切几次才出错”，而是第一次 fallback 图加载失败后，事件未被切断，浏览器继续尝试加载同一张（已失效的）备用图，形成死循环。它不关心你切了几轮，只认准「这张图 src 换了但 still 404」这个事实。
轮播中动态换 src 时 onerror 必须提前绑定
常见错误是先 appendChild() 再加 onerror，或者用 img.src = newSrc 后再补监听——此时若新图 404，onerror 根本不会触发，因为错误发生在赋值瞬间，而事件处理器还没挂上。
- 动态创建的
onerror，例如：const img = document.createElement('img');<br>img.onerror = function() {<br> this.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==';<br> this.onerror = null;<br>};<br>img.src = nextImageUrl; // 此刻才开始加载<br>container.appendChild(img); - 不要用内联字符串写法如
onerror="fallback()"，函数未定义会导致整个事件处理器静默失效 - 若用
addEventListener("error", handler)，记得加{ once: true }，否则每次换图都可能重复绑定
fallback 图必须零依赖路径与网络
轮播图高频切换下，任何外部资源都可能成为瓶颈：CDN 故障、相对路径拼错、本地 file:// 协议拦截、甚至 fallback 图本身托管在同一个不稳定的域名下——这些都会让 onerror 从“兜底”变成“雪崩起点”。
- 绝对禁止使用相对路径 fallback，例如
./placeholder.png或../images/fallback.jpg - 推荐直接使用内联 SVG base64 占位图：
data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAi...，体积小、无请求、无跨域、无路径解析风险 - 如果必须用外部图，确保其部署在高可用静态路径，如
/assets/placeholder.svg，且 Nginx / CDN 已配置该路径可匿名访问
轮播自动播放时 onerror 和 onload 的协作陷阱
自动轮播中，onload 和 onerror 不是并列选项，而是竞争关系：一张图加载中，你又切到下一张，上一个 onload 可能还没执行就被覆盖；而 onerror 若没切断，就会在 fallback 图上再次触发。
- 每次切换前，先清理旧监听：
img.onload = null; img.onerror = null; - 更稳妥的是统一用
addEventListener并配{ once: true }，避免手动清空遗漏 - 在
onerror处理器里，除了换图和切断自身，还应调用slideNext()或跳过当前项，防止卡在一张失败图上不动
真正难处理的不是“怎么写 onerror”，而是轮播场景下它被反复触发的上下文：DOM 频繁变更、src 动态重赋、错误状态与 UI 状态不同步。一旦 fallback 图不可靠，所有降级逻辑就从防御变成攻击面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
