onerror会重复触发是因为每次图片加载失败浏览器都独立触发一次，属预期行为；应通过闭包+标志位确保逻辑仅首次失败时执行一次，后续动态插入需手动重置标志位。
onerror 为什么会重复触发
因为每次 img 标签加载失败，浏览器都会独立触发一次 onerror，循环里生成多个 img，就可能触发多次——这不是 bug，是预期行为。关键不是“阻止后续触发”，而是让逻辑只在**首个失败时执行一次**。
用闭包 + 标志位控制执行次数
最直接的方式是在循环外声明一个变量，记录是否已处理过错误；每次进入 onerror 先判断，再置位：
let hasErrored = false;
for (let i = 0; i < urls.length; i++) {
const img = document.createElement('img');
img.src = urls[i];
img.onerror = function() {
if (!hasErrored) {
console.log('首轮失败，执行兜底逻辑');
// 比如：加载备用图、上报、显示默认占位
hasErrored = true;
}
};
container.appendChild(img);
}
注意：hasErrored 必须在循环外定义，否则每次循环都重置为 false；闭包确保每个 onerror 都能访问它。
用事件委托 + stopPropagation 不可行
有人想用父容器监听 error 事件再 stopPropagation()，但这条路走不通：
立即学习“前端免费学习笔记（深入）”；
-
error事件不冒泡（bubbles: false），无法委托 -
onerror是 HTML 属性级处理器，不是通过addEventListener绑定，无法用once或removeEventListener控制 - 即使手动绑定，也得为每个
img单独加监听，仍需标志位协调
更健壮的写法：封装成可复用函数
如果多个地方要用，建议抽成函数，避免全局变量污染：
function createSingleErrorHandler(callback) {
let fired = false;
return function() {
if (!fired) {
fired = true;
callback.apply(this, arguments);
}
};
}
// 使用
for (const url of urls) {
const img = document.createElement('img');
img.src = url;
img.onerror = createSingleErrorHandler(() => {
console.log('只响一次：加载 fallback.png');
img.src = '/fallback.png';
});
container.appendChild(img);
}
这种写法把状态封闭在函数作用域内，不会和其他逻辑冲突；callback 里的 this 仍是当前 img 元素，方便操作 DOM。
真正容易被忽略的是：如果页面后续动态插入新 img，这个标志位不会自动重置——需要按业务决定是否手动清零，或改用更细粒度的控制（比如按 URL 分组）。
