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();
}
}
