JavaScript判断页面是否已经打开/加载完成的多种方法
更新时间：2026年06月11日 08:27:45 作者：卷帘依旧
本文详细介绍了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判断页面加载完成的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了微信小程序自定义底部弹出框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
前端JavaScript之NaN、undefined、null示例详解
我们日常js开发中,你是不是经常被undefined、null、NaN搞得晕头转向,下面这篇文章主要介绍了前端JavaScript之NaN、undefined、null的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2026-05-05
这篇文章主要介绍了使用zrender.js绘制体温单效果,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
这篇文章主要为大家详细介绍了JS实现五星好评效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
下面小编就为大家带来一篇js按条件生成随机json:randomjson实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要介绍了了解Javascript的模块化开发,本文讲解了为什么需要模块化开发,模块化开发的形成原因等内容,需要的朋友可以参考下2015-03-03
这篇文章主要为大家详细介绍了相册展示PhotoSwipe.js插件实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,因为他们都是字符串形式的.在网上找了一下js字符串转数字的文章,这个比较全2013-03-03
这篇文章主要介绍了浅谈微信JS-SDK 微信分享接口开发（介绍版），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了JavaScript输出当前时间Unix时间戳的方法,涉及javascript中Date及getTime等函数操作时间的使用技巧,需要的朋友可以参考下2015-04-04
最新评论