HTML无原生onerror循环计数机制，所谓“循环”是开发者误写导致的无限触发；需手动按图片路径粒度统计重试次数，绑定onerror必须在设置src前完成，并优先使用addEventListener，同时确保fallback资源真实可达。
HTML 里没有内置的 onerror 循环次数统计机制，所谓“循环”是开发者误写导致的无限触发行为，浏览器本身不记录、不上报、也不暴露计数接口。真要统计，必须自己埋点，且得先确保不会卡死页面。
为什么不能依赖浏览器原生统计
浏览器对 onerror 的处理是纯事件驱动：加载失败 → 触发一次回调 → 换 src → 再失败 → 再触发。它不区分“第几次”，也不提供调用栈深度或重入标记。你看到的“循环”，其实是同一段内联逻辑被反复执行，而非浏览器在维护一个计数器。
-
window.onerror和.onerror
- 控制台通常不报错，只表现为内存持续上涨、CPU 占用飙升、图片区域闪烁或空白
- DevTools 的 Network 面板里看不到重复请求（因为备用图请求可能被缓存 404 响应，或根本没发出去）
如何安全地记录单张图的失败尝试次数
关键不是“统计循环”，而是“按路径粒度限制并记录重试行为”。直接全局计数会误伤——比如两张不同图都失败，不该共用一个计数器。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
new URL(img.src, location.href).pathname标准化路径，避免相对路径、协议差异干扰 - 把计数存在闭包或模块级对象里，例如
const retryCounts = {} - 每次进入
onerror回调时先加一，再判断是否超限：if ((retryCounts[key] || 0) > 2) return - 必须在赋新
src前清空旧值：img.src = '';，否则浏览器可能跳过请求，计数就失去意义
动态插入图片时怎么避免计数错乱
JS 创建的 appendChild() 再绑 onerror，首次失败大概率错过。计数逻辑若放在这之后，等于没统计。
- 绑定必须在设置
img.src之前完成，且优先用addEventListener('error', handler)，不用onerror = function() {} - handler 内第一行就该做计数和判别，例如：
const key = new URL(e.target.src, location.href).pathname; - 不要用
arguments.callee或匿名函数，否则无法移除监听器，重复插入会导致计数叠加 - 推荐用
dataset打标：img.dataset.retryCount = '0'，比闭包更易调试，也兼容后续复用
真正该盯住的不是“次数”，是 fallback 是否可达
线上最常出问题的不是计数不准，而是 fallback 图本身又 404。这时候统计出“重试了 5 次”，其实毫无价值——因为第 1 次就该换 base64 SVG。
- 统计逻辑再完善，也救不了
onerror="this.src='fallback.png'; this.onerror=null;"里那个fallback.png实际不存在 - 用
data:image/svg+xml;base64,...替代任何外部路径，计数可降为 0，因为不再有网络失败环节 - 如果非要用 CDN 备份，确保每个备用地址都经过
fetch(...).then(r => r.status === 200)预检，而不是靠 onerror 被动兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
