onload属性在标签中无效，正确做法是用addeventlistener监听load事件且需在设置src前绑定，同时必须监听error事件以防失败无反馈。
onload属性在![]()
标签里根本不会触发
直接写 onload 在 <img> 标签上看似合理，但实际无效——HTML 规范里 onload 不是 <img> 的标准事件属性，浏览器不会主动触发它。你写的 onload="callback()" 看似执行了，其实是靠 JS 引擎把字符串当代码求值（类似 eval），但前提是图片已缓存或极快加载完成，不可靠，也不符合事件机制。
正确做法：用 addEventListener 监听 load 事件
必须用 JS 显式监听 load 事件，且要在设置 src 之前绑定，否则可能错过事件：
@@##@@
<script>
const img = document.getElementById('myImg');
img.addEventListener('load', () => {
console.log('图片加载完成');
});
img.src = '/path/to/image.jpg'; // 必须在绑定后设置 src
</script>
- 如果先设
src再绑load，而图片来自缓存，事件会立即触发、但监听器还没挂上，回调就丢了 -
load事件只在图片成功加载时触发；失败走error事件，需单独监听 - 现代浏览器都支持，无需 polyfill
兼容旧版 IE？用 onload 属性 + 对象方法绑定
IE8 及更早版本不支持 addEventListener，但支持给 img.onload 赋函数值：
const img = document.getElementById('myImg');
img.onload = function() {
console.log('图片加载完成');
};
img.src = '/path/to/image.jpg';
- 不要混用：别一边写
img.onload = ...，一边又用addEventListener('load', ...)，后者会覆盖前者 - IE8 不支持箭头函数，得用
function声明 - 现在基本不用考虑 IE8，除非维护老系统；否则优先用
addEventListener
异步加载场景下容易漏掉的两个坑
动态创建图片、懒加载、或从 API 拿 URL 后再渲染时，最容易出错：
- 图片 URL 是空字符串、
data:协议或 base64，也可能触发load，但不是网络加载，行为不一致 - 如果
src设置的是无效路径或跨域资源（且没配 CORS），load不会触发，error会触发——但很多人只监听load，结果卡死无反馈 - 建议始终同时处理：
img.addEventListener('load', handler); img.addEventListener('error', handler);
真正关键的不是“怎么写 onload”，而是“确保监听器在 src 设置前就位”和“必须覆盖 error 分支”。漏掉任一环节，回调就成薛定谔的执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
