页面加载时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区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1566430.html
微信扫一扫 
支付宝扫一扫 
