window.onload 能确保图片和 CSS 加载完毕，因其等待所有静态资源（含 link 样式、img 元素）下载解析完成；但动态插入资源不计入，且失败资源仍触发事件。
window.onload 本身就能确保页面中所有资源（包括图片、CSS、JS、iframe 等）完全下载并解析完成后再执行，所以它天然适合用来判断“图片和样式全部加载完毕”。但要注意：它等待的是所有资源加载完成，而不仅仅是 DOM 就绪，因此会比 DOMContentLoaded 慢不少。
为什么 window.onload 能保证图片和 CSS 加载完
CSS 文件（通过 <link rel="stylesheet">）会被浏览器阻塞渲染，且 window.onload 明确等待其加载和解析完成；图片（<img>）作为外部资源，也会被计入 onload 的加载计数。只要它们是 HTML 中静态声明的（非 JS 动态插入），就会被纳入等待范围。
注意：内联样式（）或 <style> 标签内容无需网络请求，属于 DOM 解析阶段，不额外影响 onload 时间。
基本用法（推荐写法）
避免使用 window.onload = function() {...} 这种赋值方式，防止覆盖其他 onload 回调：
- 用
addEventListener('load', handler)更安全，支持多次绑定 - 确保脚本放在
<body>底部，或使用defer，避免因脚本阻塞导致监听未注册
示例：
<script>window.addEventListener('load', function() {
console.log('页面所有资源（含图片、CSS、JS）已加载完毕');
// 此时可安全读取图片自然宽高、计算布局、启动动画等
});
</script>
常见误区与注意事项
-
动态插入的图片不触发 onload 重算：如果 JS 后续用
new Image()或document.createElement('img')添加图片，这些不会影响原生window.onload，需单独监听其onload事件 - CSS @import 或字体文件（@font-face）也计入等待，但某些老旧浏览器对字体加载完成的判定可能不一致
-
失败资源（404 图片、CSS 加载超时）仍会触发 onload，只是对应资源不可用；如需校验，得手动检查
img.naturalWidth > 0或用performance.getEntriesByType('resource')
替代方案对比（按场景选择）
- 只关心 DOM 结构就绪？→ 用
DOMContentLoaded（更快，但 CSS 可能未生效、图片未加载） - 要等关键图片（如首屏大图）加载完再展示内容？→ 单独给关键
<img>绑定onload或用loading="eager"+ Promise.all - 需要精确控制样式计算时机？→ 可结合
getComputedStyle和requestAnimationFrame确保样式已应用
