js 页面加载事件|极客笔记

js 页面加载事件

在网页开发中，我们经常需要在页面加载完成后执行一些操作，比如初始化页面数据、加载动画效果等。为了实现这些需求，我们可以利用 JavaScript 中的页面加载事件。

页面加载事件分为两种：一种是页面加载完成后执行的事件，另一种是页面正在加载时执行的事件。接下来，我们将详细介绍这两种页面加载事件的用法及示例代码。

页面加载完成事件

页面加载完成后执行的事件主要有以下两种：

DOMContentLoaded：当 HTML 文档被完全加载和解析完成之后，即 DOM 树构建完成后触发。
load：当整个页面及其所有依赖资源（如图片、样式表等）加载完成后触发。

`DOMContentLoaded` 事件

DOMContentLoaded 事件在页面的 DOM 构建完成后触发，此时页面的 CSS、图片等资源可能还未加载完成。我们可以在这个事件中执行一些 DOM 操作或初始化逻辑，而无需等待所有资源加载完成。

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM 构建完成');
  // 执行一些初始化操作
});

`load` 事件

load 事件在整个页面及其所有资源加载完成后触发。我们可以在这个事件中执行一些需要等待页面完全加载的逻辑，比如计算页面元素的位置、请求后台数据等。

window.addEventListener('load', function() {
  console.log('页面加载完成');
  // 执行一些需要等待页面加载完成的操作
});

页面加载中事件

除了页面加载完成后的事件外，我们还可以在页面加载过程中执行一些逻辑，比如加载动画、显示加载进度等。以下是两种常见的页面加载中事件：

progress：当浏览器正在下载页面资源时不断触发，可以用来显示加载进度。
readystatechange：当页面加载状态发生改变时触发，可以用来执行一些加载中的逻辑。

`progress` 事件

progress 事件在浏览器正在下载页面资源时会被不断触发。我们可以利用这个事件来显示页面的加载进度。

window.addEventListener('progress', function(event) {
  if (event.lengthComputable) {
    var percentComplete = (event.loaded / event.total) * 100;
    console.log('加载进度：' + percentComplete + '%');
    // 更新加载进度条
  }
});

`readystatechange` 事件

readystatechange 事件在页面加载状态发生改变时触发，比如开始加载、正在加载、加载完成等。我们可以通过监听这个事件来执行一些加载中的逻辑。

document.addEventListener('readystatechange', function() {
  console.log('页面加载状态：' + document.readyState);
  if (document.readyState === 'loading') {
    // 加载中逻辑
  } else if (document.readyState === 'complete') {
    // 加载完成逻辑
  }
});

示例代码

下面是一个结合 DOMContentLoaded 和 load 事件的示例代码，演示了页面加载完成后执行的初始化操作：

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM 构建完成');
  // 执行一些初始化操作
});

window.addEventListener('load', function() {
  console.log('页面加载完成');
  // 执行一些需要等待页面加载完成的操作
});

运行以上代码，可以在控制台看到相应的输出，以及在页面加载完成后执行初始化操作。