判断页面是否加载完成

lio_zero

于 2022-03-06 00:40:51 发布

阅读量1.2k

点赞数

文章标签：前端 javascript html css 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_46267040/article/details/125369590

版权

本文介绍了DOM加载和DOMContentLoaded事件的区别。当'load'事件触发时，页面的DOM、CSS、JS及图片已完成加载；而'DOMContentLoaded'事件仅表示初始HTML已完全加载和解析，不等待CSS和JS。CSS加载会阻塞DOM渲染和后续JS执行，JS则会阻塞DOM解析。理解这两个事件对于优化网页性能至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Load 事件触发代表页面中的 DOM，CSS，JS，图片已经全部加载完毕。
DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待 CSS，JS，图片加载。

document.addEventListener('load', function () {})
document.addEventListener('DOMContentLoaded', function () {})

注意：CSS 加载会阻塞 DOM 的渲染和后面 JS 的执行，JS 会阻塞 DOM 解析。