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

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

大家好，我是大澈！

本文约 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事件。