跳到主要内容

DomContentLoaded、load

DOMContentLoaded 事件是在 HTML 文档解析完成并且所有 DOM 节点已经生成之后触发的事件。换句话说，当 HTML 文档被完全加载和解析，并且 DOM 树已经构建完成时，DOMContentLoaded 事件会被触发。

DomContentLoaded​

与 load 事件不同，DOMContentLoaded 事件不需要等待样式表、图片和子框架的加载完成。这使得它成为在页面完全加载之前执行 JavaScript 初始化的理想时机。

通常情况下，DOMContentLoaded 事件用于执行页面初始化操作，比如绑定事件监听器、修改 DOM 结构等，而 load 事件则用于处理页面中的所有资源（包括图片、样式表、脚本等）都已加载完毕的情况下执行的操作。

使用示例：

document.addEventListener('DOMContentLoaded', function() {
  // 在 DOMContentLoaded 事件触发后执行的初始化操作
  console.log('DOM 已经完全加载和解析完成');
});

load​

load 事件是当整个页面及其所有依赖资源（包括图片、样式表、脚本等）都已经完全加载并显示给用户时触发的事件。换句话说，当页面的所有内容（包括外部资源）都加载完成后，load 事件会被触发。

load 事件通常用于在页面加载完成后执行一些后续操作，比如处理图片加载完成后的事件、执行一些需要等待页面完全加载后才能执行的初始化操作等。

使用示例：

window.addEventListener('load', function() {
  // 在页面及其所有依赖资源加载完成后执行的操作
  console.log('页面及其所有资源都已加载完毕');
});

与 DOMContentLoaded 事件相比，load 事件要更晚触发，因为它等待所有资源加载完成，包括图片等外部资源。因此，如果需要在页面完全加载后执行一些操作，可以使用 load 事件；而如果只需要在 DOM 树构建完成后执行操作，可以使用 DOMContentLoaded 事件。