JavaScript判断页面是否已经打开/加载完成的多种方法
作者：卷帘依旧
本文详细介绍了JavaScript中判断页面加载状态的五种实用方法,涵盖页面完全加载、DOM结构加载完成及页面激活状态,帮助你掌握这些技巧,轻松应对各种页面加载场景,需要的朋友可以参考下
在 JavaScript 中，判断页面是否已经打开/加载完成，主要分 3 种场景，本文整理最实用、直接能用的写法，覆盖所有情况。
一、最常用：判断页面完全加载完成
页面 DOM、图片、样式、资源都加载好了。
1. 原生 JS 写法
// 页面完全加载完成后触发
window.onload = function () {
console.log("页面已经打开并加载完成！");
};
2. 监听事件（推荐）
window.addEventListener("load", function () {
console.log("页面加载完成");
});
二、判断 DOM 结构加载完成（不等图片）
只需要 HTML 结构渲染完成，不用等图片、视频。
document.addEventListener("DOMContentLoaded", function () {
console.log("DOM 已加载完成，页面已打开");
});
应用场景：这个最常用在组件初始化、获取 DOM 元素。
三、判断当前页面是否处于激活/可见状态
判断页面是不是正在被用户查看（不是最小化、不是后台）。
document.addEventListener("visibilitychange", function () {
if (!document.hidden) {
console.log("页面被打开/切换到前台");
} else {
console.log("页面被切换到后台");
}
});
四、判断页面是否是首次打开
if (performance.navigation.type === 1) {
console.log("页面是刷新打开的");
} else {
console.log("页面是首次正常打开");
}
五、最简单：直接判断当前页面是否已加载
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
- DOM 就绪：
- 三个状态：
总结（推荐背诵）
实际开发中，掌握以下 2 种方式 即可覆盖绝大多数场景：
1. DOM 加载完成（推荐）
document.addEventListener('DOMContentLoaded', () => {})
2. 页面全部资源加载完成
window.addEventListener('load', () => {})
以上就是JavaScript判断页面是否已经打开/加载完成的多种方法的详细内容，更多关于JavaScript判断页面加载完成的资料请关注脚本之家其它相关文章！