HTML DOM readyState 属性

定义和用法

readyState 属性返回当前文档的状态（载入中……）。

该属性返回以下值:

uninitialized - 还未开始载入

loading - 载入中

interactive - 已加载，文档与用户可以开始交互

complete - 载入完成

语法

document.readyState

=====================

1. document.readyState

1.1. 概述

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

1.2. 值

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

1）loading / 加载 。document 仍在加载。

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

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

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

1.3. 语法

let string = document.readyState;

1.4. 例子

不同的准备状态

switch (document.readyState) {

  case "loading":

    // The document is still loading.

    break;

  case "interactive":

    // The document has finished loading.

    // We can now access the DOM elements.

    var span = document.createElement("span");

    span.textContent = "A <span> element.";

    document.body.appendChild(span);

    break;

  case "complete":

    // The page is fully loaded.

    let CSS_rule = document.styleSheets[0].cssRules[0].cssText;

    console.log(`The first CSS rule is: ${CSS_rule }`);

    break;

}

// 模拟 DOMContentLoaded/ jquery ready

document.onreadystatechange = function () {

  if (document.readyState === "interactive") {

    initApplication();

  }

}

// 模拟 load/onload 事件

document.onreadystatechange = function () {

  if (document.readyState === "complete") {

    initApplication();

  }

}

2. document.onreadystatechange

2.1. 概述

当一个文档的 readyState 属性发生更改时，readystatechange 事件会被触发。

2.2. 语法

document.onreadystatechange = funcRef;

funcRef 是个函数引用,会在readystatechange事件触发时调用.

2.3. 例子

/*

interactive / 互动

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

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState

*/

// 模拟DOMContentLoaded事件

document.onreadystatechange = function () {

    if (document.readyState === "interactive") {

        initApplication();

    }

}