页面加载时JS初始化的时机选择取决于脚本依赖的内容。主要有两种方式：一、domcontentloaded：dom结构就绪后立即执行，适合处理与dom操作相关的逻辑，如绑定事件、修改元素等，但不依赖图片或资源加载；二、window.onload：等待所有资源（如图片、样式表）加载完成后执行，适合需要获取图片尺寸或依赖完整资源的场景。选择依据是：若只需dom结构，用domcontentloaded；若需全部资源，用window.onload。
页面加载时JS初始化，主要看你想在什么时候执行脚本。常见的两种方式是 window.onload 和 DOMContentLoaded。它们都能用来触发初始化操作，但时机不同。
简单说：
- DOMContentLoaded 是文档结构（DOM）就绪后立刻触发，不等图片、样式表这些资源加载完。
- window.onload 是整个页面包括所有资源都加载完成后才触发。
所以如果你的JS代码只需要操作DOM，用 DOMContentLoaded 更快；如果需要等图片或外部资源再执行，那就得用 window.onload。
立即学习“前端免费学习笔记（深入）”；
一、DOMContentLoaded：DOM准备好就执行
这是最常用的页面初始化时机之一。适合处理页面结构相关的逻辑，比如绑定点击事件、动态修改DOM元素等。
你可以这样写：
document.addEventListener('DOMContentLoaded', function() { // 这里放你的初始化代码 });
或者使用jquery的话：
$(document).ready(function() { // 初始化代码 });
甚至可以简化为：
$(function() { // 初始化代码 });
适用场景举例：
- 页面上有个按钮，点击弹出提示框。
- 动态生成一些下拉菜单或导航栏。
注意点：
- 此时可能图片还没加载完，不要依赖图片尺寸相关逻辑。
- 如果脚本放在body底部，也可以不用监听这个事件，直接写在DOM后面。
二、window.onload：等全部资源加载完再执行
如果你想确保图片、iframe、样式表这些资源都加载完成后再执行JS，就要用 window.onload。
写法如下：
window.onload = function() { // 所有资源加载完成后的初始化代码 };
也可以加监听器：
window.addEventListener('load', function() { // 初始化代码 });
适用场景举例：
- 需要获取图片宽高来布局。
- 页面中有大量异步请求，需要等数据回来再操作DOM。
- 做页面性能统计，等所有资源加载完再上报数据。
注意点：
- 如果页面有很多大图或第三方资源，可能会延迟很久才触发。
- 不建议把太多逻辑放在这里，影响用户体验。
三、怎么选？看你的JS依赖什么
选择哪个事件，关键看你初始化的JS代码是否依赖某些资源：
- ✅ 只需要DOM结构 → 用 DOMContentLoaded
- ✅ 需要图片、视频、字体等资源 → 用 window.onload
另外，还可以结合实际情况分阶段处理：
- DOM就绪后先做基本交互（如按钮绑定）
- 等图片加载完再做视觉效果（如轮播图自动播放）
有些框架（比如vue、React）会自动处理初始化时机，但如果是原生JS开发，这两个事件就是基础工具了。
基本上就这些。两个事件的区别其实挺直观，关键是理解你当前脚本依赖什么内容。别一股脑全塞到 onload 里就行。
以上就是html页面加载时JS怎么初始化？window.onload与DOMContentLoaded
