onload在缓存图片上不触发不是bug而是规范行为，因浏览器可能在绑定前就完成加载；必须用img.complete && img.naturalwidth > 0组合判断是否真正可用，否则逻辑断裂。
onload 属性在缓存图片上不触发，不是 bug，是浏览器行为；必须改用 img.complete + img.naturalWidth 组合判断，否则逻辑必然断裂。
为什么 onload 在缓存图片上会失效
浏览器对已缓存的图片可能在你设置 src 的瞬间就完成加载——此时 onload 事件监听还没绑定，事件直接跳过。这不是兼容性问题，而是规范行为。
- HTML 内联写法
<img src="a.png" onload="handle()">同样不可靠：DOM 解析时若图片已缓存，onload不会回调 - 动态创建
new Image()后再赋值src，但没在赋值前绑定onload，也会漏掉事件 - iOS Safari 对大图或慢网有额外延迟策略，进一步放大该问题
正确检测图片是否真正可用的三步判断
仅靠 img.complete 不够，它无法区分“加载成功”和“加载失败但标记为 complete”。必须结合尺寸验证：
-
img.complete === true && img.naturalWidth > 0→ 可安全使用（已加载且尺寸有效） -
img.complete === true && img.naturalWidth === 0→ 图片损坏、空响应，或跨域拦截（检查控制台 CORS 报错） -
img.complete === false→ 必须继续监听onload/onerror，不能跳过
示例：
const img = new Image();
img.crossOrigin = 'anonymous'; // 跨域必需
img.onload = () => {
if (img.naturalWidth > 0) {
console.log('真正可用');
} else {
console.error('CORS 或损坏');
}
};
img.onerror = () => console.error('加载失败');
// ✅ 关键：必须在赋值前绑定
img.src = '/logo.png';
跨域图片 naturalWidth 总是 0 怎么办
服务端未返回 Access-Control-Allow-Origin 时，浏览器屏蔽尺寸读取——即使 onload 触发了，naturalWidth 也强制为 0。
- 前端加
img.crossOrigin = 'anonymous'是必要条件，但前提是后端允许该跨域请求 - 不能用
img.width或offsetWidth替代：width受 HTML 属性影响，offsetWidth受 CSS 影响，都不是原始尺寸 - 若无法改服务端，只能 fallback 到预设宽高、服务端返回的元数据，或用
decode()后再测（见下一条）
需要确保 GPU 解码完成才渲染怎么办
onload 只表示解码就绪，大图（尤其 WebP/HEIC）首次绘制仍可能卡顿。这时得用 decode()：
-
img.decode()返回 Promise，等待 GPU 解码完成才 resolve - 必须在
onload触发后调用，否则会 reject - 现代浏览器基本支持，IE 不支持，需 try/catch 降级
示例：
img.onload = async () => {
if (img.naturalWidth > 0) {
try {
await img.decode();
document.body.appendChild(img);
} catch (e) {
console.warn('decode failed, fallback to onload render', e);
document.body.appendChild(img);
}
}
};
真正麻烦的不是“怎么监听”，而是缓存、跨域、解码三个层叠问题同时存在时，单一判断会漏掉任意一环。多数人只处理了第一层，后面两层藏在生产环境偶发 Bug 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
