HTML绑定onerror死循环怎么关掉？阻断无限循环配置方案-html教程-PHP中文网

onerror无限循环的直接原因是备用图也加载失败且未执行this.onerror=null，导致错误反复触发、内存持续增长直至卡死。

html绑定onerror死循环怎么关掉？阻断无限循环配置方案

onerror无限循环的直接原因是什么

浏览器对 onerror 的触发有隐式限制：一旦备用图（fallback）也加载失败，第二次 onerror 可能被静默丢弃，但首次仍会执行——而如果没手动切断，它就会尝试第三次、第四次……内存持续增长，标签页卡死甚至崩溃。这不是代码写错了，是事件链没断。

关键点只有两个：

this.onerror = null 必须出现在赋值新 src 的同一行内
备用图路径必须绝对可靠，不能是相对路径、未部署路径或带空格/编码错误的 URL

最简可靠的内联写法怎么写

CMS、邮件模板或静态 HTML 场景下必须用内联 onerror 时，只接受这一种写法：

@@##@@

注意这几点：

this.onerror=null 要写在 this.src=... 前面或后面都行，但必须在同一语句中，用分号隔开
占位图推荐用 data:image/svg+xml;base64,... 或以 / 开头的绝对路径，避免因 base URL 导致二次 404
不要用 ./fallback.png 或 images/fallback.jpg 这类相对路径，它们在不同路由下极易解析失败

动态插入图片时 onerror 绑定时机很关键

document.createElement('img') 创建后，必须在插入 DOM 之前就绑定 onerror，否则图片可能在绑定完成前就已触发错误，导致事件丢失。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

const img = document.createElement('img');
img.src = 'https://api.example.com/avatar?id=123';
img.onerror = function() {
  this.src = '/assets/placeholder.svg';
  this.onerror = null;
};
document.body.appendChild(img); // 插入前已完成绑定

常见错误：

先 appendChild 再 img.onerror = ... → 很可能来不及
使用 addEventListener('error', ...) 但没加 useCapture: true → 某些浏览器不捕获冒泡前的错误

全局监听 error 事件更稳妥吗

对大量动态图片（如列表、瀑布流），全局监听确实比每个 img 写内联更可控：

document.addEventListener('error', e => {
  if (e.target.tagName === 'IMG' && !e.target.dataset.handled) {
    e.target.dataset.handled = '1';
    e.target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2UwZTBlMCIvPjwvc3ZnPg==';
  }
}, true);

这个方案绕过了内联语法限制，但要注意：