DOMContentLoad和Load区别

最新推荐文章于 2023-10-16 15:29:19 发布

G&C

最新推荐文章于 2023-10-16 15:29:19 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： js相关文章标签： javascript 前端

本文链接：https://blog.csdn.net/gaochuanpei/article/details/105352699

本文介绍了DOMContentLoad和Load事件的区别。DOMContentLoad在HTML DOM结构加载完成后触发，而Load则等待所有资源和脚本执行完毕。通过Chrome的network截图，可以清晰看到两个事件的时间点。此外，文中探讨了DOMContentLoaded的使用，指出complete状态可以作为DOMContentLoad的替代，并提到了IE9及以下版本中利用doScroll属性判断DOMContentLoad状态的方法。

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

区别

具体区别已经有很多人去详细讲述了，简单来说：
DOMContentLoad是HTML Dom结构完成时触发，相当于jquery.ready。
Load是页面整体完成时触发，即所有加载资源与js脚本执行完毕后触发，相当于jquery.load。
用一张图即可看出区别，chrome的network截图。其中蓝线为DOMContentLoaded完成时间点，红线为Load完成时间点

DOMContentLoaded的使用及替代方法

每个对象都有readyState值，可分为5个状态uninitialized、loading、loaded、interactive、complete。
对于document.readyState，通过readystatechange事件绑定测出含有三个状态，分别为loading、interactive、complete。
complete状态相当于DOMContentLoad状态，因此可进行替代。

doScroll是IE9及以下IE浏览器Node节点的特有属性（因为在别的浏览器测试时检测不到），可通过循环判定document.documentElement的doScroll是否可调用进行判断DOMContentLoad状态。