JavaScript 判断页面加载完成的多种场景

在 JavaScript 中，判断页面是否已经打开/加载完成 ，主要分 3 种场景，本文整理最实用、直接能用的写法，覆盖所有情况。

一、最常用：判断页面完全加载完成

页面 DOM、图片、样式、资源都加载好了。

1. 原生 JS 写法

javascript 复制代码

// 页面完全加载完成后触发
window.onload = function () {
  console.log("页面已经打开并加载完成！");
};

2. 监听事件（推荐）

javascript 复制代码

window.addEventListener("load", function () {
  console.log("页面加载完成");
});

二、判断 DOM 结构加载完成（不等图片）

只需要 HTML 结构渲染完成，不用等图片、视频。

javascript 复制代码

document.addEventListener("DOMContentLoaded", function () {
  console.log("DOM 已加载完成，页面已打开");
});

应用场景：这个最常用在组件初始化、获取 DOM 元素。

三、判断当前页面是否处于激活/可见状态

判断页面是不是正在被用户查看（不是最小化、不是后台）。

javascript 复制代码

document.addEventListener("visibilitychange", function () {
  if (!document.hidden) {
    console.log("页面被打开/切换到前台");
  } else {
    console.log("页面被切换到后台");
  }
});

四、判断页面是否是首次打开

javascript 复制代码

if (performance.navigation.type === 1) {
  console.log("页面是刷新打开的");
} else {
  console.log("页面是首次正常打开");
}

五、最简单：直接判断当前页面是否已加载

javascript 复制代码

if (document.readyState === "complete") {
  console.log("页面已完全加载");
}

// 或者监听状态变化
document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    console.log("页面加载完成");
  }
};

document.readyState和其他加载方式的区别

DOMContentLoaded：只等 DOM，不等图片 → 快
window.load：等所有资源 → 慢
document.readyState ：随时可以查当前状态 → 最灵活
- document.readyState 是页面加载状态
  - 三个状态：loading → interactive → complete
  - 最常用判断：
    - DOM 就绪：interactive
    - 页面完全打开：complete

总结（推荐背诵）

实际开发中，掌握以下 2 种方式 即可覆盖绝大多数场景：

1. DOM 加载完成（推荐）

javascript 复制代码

document.addEventListener('DOMContentLoaded', () => {})

2. 页面全部资源加载完成

javascript 复制代码

window.addEventListener('load', () => {})