### [onload 与 DOMContentLoaded 分不清的那次](https://www.huociguo.com/article/1845)

**Published:** 2026-10-03T02:35:19

**Author:** 米了

**Excerpt:** 🐢 有回做数据看板，初始化脚本全挂在 上。页面图片多，图表要等所有图加载完才出来，白屏四五秒。用户以为卡死。后…

🐢 有回做数据看板，初始化脚本全挂在 `window.onload` 上。页面图片多，图表要等所有图加载完才出来，白屏四五秒。用户以为卡死。后来才搞清 `onload` 和 `DOMContentLoaded` 不是一回事。

`window.onload` 等全部资源就绪才触发：图片、样式表、脚本、iframe 一个不落。`DOMContentLoaded` 只等 DOM 树解析完，图片没加载也照常触发。只看板要绑事件、画图表，根本不必等图片。

![页面加载事件示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-3584973.jpeg)

资源都到位，onload 才点火

改法简单：

```
// 早触发，DOM 就绪即可
document.addEventListener('DOMContentLoaded', init);
// 等全部资源再跑
window.addEventListener('load', slowInit);
```

⚠️ 另一个坑：`window.onload = fn` 这种写法，后面再赋值会覆盖前面的。要绑多个，统一用 `addEventListener`。

其余情况，只操作 DOM 就用 `DOMContentLoaded`，首屏响应快一截。

**Tags:** DOMContentLoaded区别, onload事件, window.onload, 资源加载事件, 页面加载完成

**Categories:** HTML5

---