DOM Document.readyState 属性

描述

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

当该属性值发生变化时，会在document 对象上触发readystatechange事件。

document.readyState

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

• loading / 正在加载
  document 仍在加载。
• interactive / 可交互
  文档已被解析，"正在加载"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。
• complete / 完成
  文档和所有子资源已完成加载。表示 load 状态的事件即将被触发。

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

示例

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