解释文档加载与 DOMContentLoaded？

最新推荐文章于 2025-02-28 09:28:32 发布

csdn_Levy

最新推荐文章于 2025-02-28 09:28:32 发布

阅读量254

点赞数 3

分类专栏： JS 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/csdn_Levy/article/details/142650106

版权

85 篇文章

订阅专栏

在浏览器加载网页时，会触发一系列的事件，其中最主要的两个事件是DOMContentLoaded和load事件。

DOMContentLoaded：这个事件在浏览器完成解析HTML文档，构建完DOM树之后就会触发。此时可能部分CSS、图片和JavaScript文件还没有完全加载和执行。如果你需要在DOM结构构建完毕，但不需要等待所有外部资源加载完毕的时候执行一些操作，那么可以监听这个事件。

例如:

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

在这个例子中，当DOM结构加载完毕后，控制台会输出”DOM fully loaded and parsed”。

load事件：与DOMContentLoaded事件不同，load事件在所有资源（如图片、CSS、JavaScript文件等）都已经加载并处理完毕后才会触发。这意味着在load事件触发时，整个页面已经完全加载完成了。

例如:

window.addEventListener("load", function(event) {
  console.log("All resources finished loading!");
});

在这个例子中，当所有资源加载完毕后，控制台会输出”All resources finished loading!”。

总的来说，DOMContentLoaded事件的触发代表着DOM结构已经加载完毕，可以进行DOM操作，而load事件的触发则代表着页面上的所有资源（包括图片、CSS文件、JavaScript文件等）都已经加载完毕。