JavaScript 页面加载事件

简介

在 Web 开发中，JavaScript 可以通过监听页面加载事件来执行相应的操作。页面加载事件可以分为两种情况：页面加载完成后执行的事件和页面正在加载中执行的事件。通过使用这些事件，可以在页面加载过程中执行特定操作，或者在页面完全加载后执行一些初始化任务。

页面加载完成后执行的事件

以下是常见的在页面加载完成后执行的事件：

DOMContentLoaded 事件

DOMContentLoaded 事件在 HTML 文档加载完成后触发，但并不等待外部资源（如图片、样式表、脚本等）加载完毕。这是一个常用的事件，通常用于执行一些与 DOM 相关的操作，如修改元素内容、添加事件监听器等。

示例代码：

document.addEventListener('DOMContentLoaded', (event) => {
  // 执行操作
});

load 事件

load 事件在整个页面及外部资源（如图片、样式表、脚本等）都加载完成后触发，即页面完全加载完毕。这一事件通常用于执行一些需要等待资源加载完毕的操作，例如初始化页面、请求数据等。

示例代码：

window.addEventListener('load', (event) => {
  // 执行操作
});

页面加载中执行的事件

以下是常见的在页面加载过程中执行的事件：

beforeunload 事件

beforeunload 事件在用户即将离开页面时触发，常用于提示用户是否保存未提交的内容或进行询问确认操作。该事件在用户关闭页面、点击链接或进行导航时触发。

示例代码：

window.addEventListener('beforeunload', (event) => {
  // 提示用户是否离开页面
  event.preventDefault();
  event.returnValue = ''; // 兼容旧版浏览器
});

progress 事件

progress 事件在页面加载过程中触发，用于跟踪页面加载的进度。可以通过该事件来显示加载进度条或其他加载提示信息。

示例代码：

window.addEventListener('progress', (event) => {
  if (event.lengthComputable) {
    const percentLoaded = (event.loaded / event.total) * 100;
    // 更新进度条或提示信息
  }
});

结论

通过监听页面加载事件，我们可以在不同阶段执行特定的操作。这些事件对于网页的初始化和用户体验至关重要。在使用这些事件时，需要根据实际需求选择合适的事件，并结合其他 JavaScript 功能来完成相应任务。

以上为对 JavaScript 页面加载事件的介绍，可以根据需要选择适合的事件来实现特定操作。希望本文对程序员的学习和开发工作有所帮助。

注意：以上代码示例中的事件绑定方式适用于现代浏览器，如果需要兼容旧版浏览器，可能需要使用其他兼容性方案。

参考文档：

• MDN - DOMContentLoaded
• MDN - load
• MDN - beforeunload
• MDN - progress