DOMContentLoaded与load事件

最新推荐文章于 2023-01-02 23:34:31 发布

Marshall001

最新推荐文章于 2023-01-02 23:34:31 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 数学 Web前端文章标签： load ready

本文链接：https://blog.youkuaiyun.com/Marshall001/article/details/75005800

javascript 同时被 3 个专栏收录

12 篇文章

订阅专栏

Web前端

10 篇文章

订阅专栏

数学

3 篇文章

订阅专栏

本文介绍了DOMContentLoaded和load事件的区别。DOMContentLoaded事件在DOM解析完成时触发，不等待资源加载，而load事件则等到所有资源包括图片、样式等加载完毕。在jQuery中，$(document).ready与DOMContentLoaded相似，都在DOM准备就绪时执行。应谨慎选择使用事件，避免不必要的延迟。

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

MDN参考：
- DOMContentLoaded
- load

区别

DOMContentLoaded: DOM解析完成即触发此事件，不等待styles, images等资源的加载
load：依赖的资源也已加载完成
DOMContentLoaded绑定到document，load绑定到window

document.addEventListener('DOMContentLoaded', function(event) {
  console.log("DOM fully loaded and parsed");  // 先打印
});
window.addEventListener('load', function(event) {
  console.log("img loaded");  // 后打印
});

jquery的$(document).ready

dom解析完成后即执行，不等待资源的加载。因此在DOMContentLoaded事件触发后执行。内部实现可简略如下

document.ready = function(cb) {
    document.addEventListener('DOMContentLoaded', function() {
        cb();
    });
};

注意

应该更适合使用DOMContentLoaded的场合不要使用load, 以免造成不必要的延迟。

It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.
js 执行的延迟会造成DOM解析延迟，从而延迟触发DOMContentLoaded事件

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

for(var i=0; i<1000000000; i++){} 
// this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
</script>