一个document 的 Document.readyState 属性描述了文档的加载状态。
当该属性值发生变化时，会在document 对象上触发readystatechange事件。
值
一个文档的 readyState 可以是以下之一：
- loading / 正在加载
document仍在加载。- interactive / 可交互
- 文档已被解析，"正在加载"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。
- complete / 完成
- 文档和所有子资源已完成加载。表示
load状态的事件即将被触发。
当这个属性的值变化时，document 对象上的readystatechange 事件将被触发。
语法
let string = document.readyState; // "complete"
例子
不同的准备状态
switch (document.readyState) {
case "loading":
// 表示文档还在加载中，即处于“正在加载”状态。
break;
case "interactive":
// 文档已经结束了“正在加载”状态，DOM元素可以被访问。
// 但是像图像，样式表和框架等资源依然还在加载。
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
case "complete":
// 页面所有内容都已被完全加载.
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 事件
document.onreadystatechange = function () {
if (document.readyState === "complete") {
initApplication();
}
}
相关链接
document.onreadystatechange- Bug 347174 - Implement document.readystate == "complete"