DOMContentLoaded 和 load 事件之间的区别

1个回答

写回答

Mikrokosmos...

2025-06-14 02:00

+ 关注

Java
Java

DOMContentLoaded 和 load 事件之间的区别

在前端开发中，DOMContentLoaded 和 load 是两个常用的事件。它们都与页面加载相关，但在触发的时机和作用上有一些不同之处。

DOMContentLoaded 事件

DOMContentLoaded 事件表示当初始的 HTML 文档被完全加载和解析完成时触发。也就是说，当页面的 DOM 结构已经生成，但不包括外部资源（如图片、样式表和脚本等）的加载和处理时，DOMContentLoaded 事件将被触发。

这个事件的主要作用是在页面加载完成后执行一些 JavaScript 代码，例如绑定事件监听器、修改 DOM 元素等操作。相较于 load 事件，DOMContentLoaded 的触发时间更早，因此可以让页面更快地响应用户的操作。

下面是一个简单的示例代码，演示了如何使用 DOMContentLoaded 事件来改变页面的背景颜色：

html
<!DOCTYPE html>
<html>
<head>
  <title>DOMContentLoaded 示例</title>
  <style>
    body {
      background-color: white;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      document.body.style.backgroundColor = 'lightblue';
    });
  </script>
</head>
<body>
  <h1>DOMContentLoaded 示例</h1>
</body>
</html>

在上面的代码中，当页面的 DOM 结构加载完成后，DOMContentLoaded 事件被触发，然后通过 JavaScript 将页面的背景颜色修改为浅蓝色。

load 事件

load 事件表示当整个页面及所有外部资源（如图片、样式表和脚本等）都已加载完成时触发。也就是说，当页面的所有内容都已经加载完毕并呈现给用户时，load 事件将被触发。

load 事件通常用于在页面加载完成后执行一些需要等待所有资源加载完成后才能进行的操作，例如初始化页面的动画效果、发送网络请求等。

下面是一个简单的示例代码，演示了如何使用 load 事件来添加页面加载完成后的提示信息：

html
<!DOCTYPE html>
<html>
<head>
  <title>load 示例</title>
  <style>
    .loading {
      display: none;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      document.querySelector('.loading').style.display = 'block';
    });
    window.addEventListener('load', function() {
      document.querySelector('.loading').style.display = 'none';
      alert('页面加载完成！');
    });
  </script>
</head>
<body>
  <h1>load 示例</h1>
  <div class="loading">正在加载中...</div>
</body>
</html>

在上面的代码中，当页面的 DOM 结构加载完成后，通过 DOMContentLoaded 事件将加载提示显示出来。当整个页面及所有外部资源加载完成后，load 事件被触发，通过 load 事件将加载提示隐藏，并弹出一个提示框，告知用户页面加载完成。

在前端开发中，DOMContentLoaded 事件和 load 事件都与页面加载相关，但在触发的时机和作用上有所区别。DOMContentLoaded 事件在页面的 DOM 结构加载完成后触发，适用于执行一些不依赖外部资源的操作；而 load 事件在整个页面及所有外部资源加载完成后触发，适用于执行一些需要等待所有资源加载完成后才能进行的操作。

以上就是 DOMContentLoaded 和 load 事件之间的区别，希望对你有所帮助！

举报有用（4）分享收藏

DOMContentLoaded 和 load 事件之间的区别

1个回答

Mikrokosmos...

热门话题

相关问题