window.onload未触发的常见原因包括：脚本提前执行（如script未加defer且置于head中）、多个赋值导致后覆盖前、页面含跨域或失效资源阻塞加载、事件注册时机已错过；推荐改用addeventlistener('load', ...)或domcontentloaded事件。
window.onload 为什么没触发？常见原因和检查点
直接写 window.onload = function() {...} 却没执行，大概率是脚本提前运行了——比如 script 标签没加 defer，又放在 里，此时 DOM 还没解析完，但更关键的是：window.onload 等的是整个页面所有资源（图片、样式表、iframe、字体等）加载完成，不是 DOM 就绪。
容易踩的坑：
- 把
window.onload赋值语句写在 DOM 元素之后但没包裹在函数里，导致执行时已错过事件注册时机 - 多个
window.onload = ...赋值，后赋的会覆盖前一个（它不是事件监听器，是单个引用） - 页面含跨域图片或失效资源，浏览器会卡住等待超时（可能长达数秒），
onload才触发
替代方案：用 addEventListener('load', ...) 更安全
比起直接覆盖 window.onload，推荐用 addEventListener 注册，支持多次绑定且不互相干扰：
window.addEventListener('load', function() {
console.log('所有资源（含图片、CSS、JS、iframe）均已加载完毕');
});
注意点：
-
load事件只在window上表示“全部资源加载完成”，在<img>或<script></script>元素上则表示该元素自身加载完成 - 如果只需等 DOM 解析完（不等图片等资源），应改用
DOMContentLoaded事件，响应更快 - IE8 及以下不支持
addEventListener，需用attachEvent('onload', ...)回退（但基本可忽略）
与 DOMContentLoaded 的关键区别在哪
DOMContentLoaded 触发时，HTML 已解析完毕、DOM 树构建完成，但图片、样式表、iframe 等外部资源可能还在加载；而 window.onload 必须等到这些资源全部就绪（或失败超时）才触发。
典型使用场景对比：
- 要操作
<img>元素的naturalWidth或offsetHeight—— 必须用load，否则尺寸可能是 0 - 要初始化菜单、绑定按钮点击 —— 用
DOMContentLoaded就够了，用户感知更快 - 要等第三方统计脚本（如 Google Analytics）加载完成再发送自定义事件 —— 需监听其
<script></script>元素的load事件，不是window.load
现代项目中其实很少需要 window.onload
ES6 模块默认延迟执行，Vue/React 应用通常靠框架生命周期（如 mounted、useEffect）控制时机，连 DOMContentLoaded 都常被封装掉。真要等图片加载，更细粒度的做法是监听具体 <img> 的 load 或用 loading="lazy" + IntersectionObserver。
如果你正在调试一个老项目并发现 window.onload 延迟严重，先检查 network 面板里有没有挂起的图片请求或跨域字体 —— 那才是真正的瓶颈，不是代码写法问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
