onerror死循环根本原因是备用图再次加载失败且未切断事件，必须赋值后立即执行this.onerror=null或removeEventListener，并用base64 SVG确保兜底资源100%可达。
滚动加载图片时触发 onerror 死循环，根本不是“加载时机没控制好”，而是备用图路径再次失败后事件未切断——只要 this.onerror 没在赋值后立刻设为 null，浏览器就会无限重试，主线程卡死、内存飙升是必然结果。
滚动加载中 onerror 为什么总卡死？
懒加载（如 loading="lazy" 或 IntersectionObserver 触发）本身不干扰 onerror，但常见错误集中在三处：
- 先插入
<img alt="HTML滚动加载图片触发onerror循环如何修复" >再绑定onerror：DOM 插入瞬间就可能触发加载失败，监听器根本来不及注册 - 备用图用相对路径（如
./fallback.png）：滚动加载常发生在子路由或 iframe 中，base URL 解析后实际请求 404 - 重复渲染列表时复用 DOM 节点：Vue/React 的 diff 过程会清空
dataset，导致已降级的图片再次进入onerror回调
动态创建 img 元素必须提前绑定 error 事件
滚动加载本质是 JS 动态插入，内联 onerror 属性在字符串拼接或框架 v-html 中基本失效（this 指向 window），唯一可靠方式是 addEventListener，且顺序不能错：
- 必须在设置
src之前绑定事件：否则首次失败直接错过 - 回调里第一句就得清空
src：img.src = ''，否则浏览器可能从缓存读取 404 响应，不发新请求 - 替换后必须立即移除监听器：
img.removeEventListener('error', handler)，否则 fallback 图再失败会二次触发 - 别用匿名函数：
img.addEventListener('error', () => { ... })，无法移除，只能靠data-handled标记跳过
示例写法：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
function handleImgError(e) {
const img = e.target;
if (img.dataset.handled === '1') return;
img.dataset.handled = '1';
img.src = '';
img.src = 'data:image/svg+xml,%3Csvg width=%2220%22 height=%2220%22%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%228%22 fill=%22%23eee%22/%3E%3C/svg%3E';
img.removeEventListener('error', handleImgError);
}
const img = document.createElement('img');
img.src = 'user-avatar.webp'; // 滚动时才赋值
img.addEventListener('error', handleImgError);
container.appendChild(img); // 必须在 appendChild 前绑定
滚动列表中如何防重复降级和漏绑？
列表滚动常伴随虚拟滚动、分页或 React/Vue 的 key 变更，容易出现两种极端：
- 旧节点未销毁，多次绑定同一监听器 → 错误时反复执行 fallback
- 新节点渲染快，监听器还没来得及挂载 → 直接白屏无 fallback
解决方案不是“统一查 DOM 绑定”，而是每个 <img alt="HTML滚动加载图片触发onerror循环如何修复" > 创建即闭环：
- 用
data-src-key记录原始意图，比如img.dataset.srcKey = user.id，便于排查是否命中预期资源 - fallback 图必须用
data:image/svg+xml;base64,...，绕过所有路径解析、CORS、CDN 故障风险 - 若需多级降级（CDN → 本地 → SVG），最多尝试 2 次，第 3 次直接设透明图并移除
onerror，避免陷入“换源→失败→再换源”的链路 - 禁止在
onerror回调里调用img.setAttribute('onerror', ...)，DOM 属性更新不会重新注册事件
哪些情况 onerror 根本不会触发？别白忙活
滚动加载失败却看不到 onerror 执行，大概率是因为它压根没被浏览器触发：
-
src是空字符串、undefined或纯空格：浏览器不发起请求，onerror静默跳过 - CORS 阻塞（如外链图床未加
crossorigin）：控制台报跨域错误，但onerror不触发 - 服务器返回 200 状态码的兜底 HTML 页面（如 Nginx 的 404.html）：浏览器认为“加载成功”，哪怕内容根本不是图片
- 图片文件头正常但数据损坏（如截断 JPEG）：行为不一致，Chrome 可能触发，Safari 可能不触发
真正要盯住的，永远是 src 路径本身——它在滚动发生时的真实环境（子路由、iframe、file:// 协议）下，是否能返回 200 + 可解码图像。其他所有逻辑，都建立在这个前提之上。
