纯JS监听document是否加载完成

欢迎加入前端交流群交流知识&&获取视频资料：749539640

概述

一个document 的 Document.readyState 属性描述了文档的加载状态。

 

一个文档的 readyState 可以是以下之一：

loading / 加载

document 仍在加载。

interactive / 互动（dom加载完成）

文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。

complete / 完成

T文档和所有子资源已完成加载。状态表示 load 事件即将被触发。

当这个属性的值变化时，document 对象上的readystatechange 事件将被触发。

if (document.readyState === 'complete') {
  // 页面已完全加载
}

或者进行监听：

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
    // document ready
  }
};