检测DOM是否已加载完成?分享 1 段优质 JS 代码片段!

myzbx 2025-08-31 06:04 6 浏览

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 700+ 字，整篇阅读约需 1 分钟。

今天分享一段优质 JS 代码片段，实现如何在页面加载的不同阶段执行不同的操作。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

window.addEventListener("DOMContentLoaded", () => {
  switch (document.readyState) {
    case "complete":
      console.log('DOM 已完全加载');
      break;
    case "interactive":
      console.log('DOM 已准备好，但资源仍在加载');
      break;
  }
});

window.addEventListener("load", () => {
  switch (document.readyState) {
    case "complete":
      console.log('所有资源已加载完成');
      break;
    case "interactive":
      console.log('DOM 已准备好，但资源仍在加载');
      break;
  }
});

分享原因

这段代码展示了如何利用 DOMContentLoaded 和 load 事件来检测页面加载状态，并基于 document.readyState 的值进行相应的处理。

在实际开发中，可能会遇到需要根据网页加载状态执行特定操作的情况，且不能去使用 JS 框架，通过这段代码，可以给你一定思路。

代码解析

1. window.addEventListener("DOMContentLoaded", ...)

监听 DOMContentLoaded 事件。

这个事件会在 DOM 树构建完成，但外部资源（如图片、样式表等）尚未加载完毕时才触发。

2. window.addEventListener("load", ...)

监听 load 事件。

该事件会在页面的所有资源（包括 DOM、图片、样式表、脚本等）都加载完成后才触发。

3. switch (document.readyState)

根据 document.readyState 的值进行不同的操作。

虽然 load 事件通常在 document.readyState 变为 complete 时触发，DOMContentLoaded 事件通常在 document.readyState 变为 interactive 后不久触发，但检查状态可以更精确，并且有助于处理一些特殊情况或异常情况。

document.readyState 可以有以下值：

uninitialized：XML 对象被产生，但没有任何文件被加载。

loading：document 正在下载文件，尚未开始解析。

loaded：部分的文件已经加载且进行解析，但对象模型尚未生效。

interactive：document 完成了解析，但是资源还在下载，对象模型是有效但只读的。此时会在 document 和 window 对象上触发DOMContentLoaded事件。

complete：代表所有资源完成加载。此时会在 window 对象上触发load事件。

JS 对象显示

上一篇：JS 中如何正确覆盖对象默认值?_js覆盖数组
下一篇：UG编程第1节:快捷键的使用_ug中常用的快捷键

检测DOM是否已加载完成?分享 1 段优质 JS 代码片段!

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

20个免费音乐音效下载网站，无版权素材商业影片也可用

comfyui安装MimicMotion扩展，AI跳舞动作模仿

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331