zoukankan      html  css  js  c++  java
  • DOM Document.readyState 属性

    感谢原文作者:MDN
    原文地址:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState

    描述

    一个documentDocument.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();
      }
    }
    
  • 相关阅读:
    Codeforces 691A Fashion in Berland
    HDU 5741 Helter Skelter
    HDU 5735 Born Slippy
    HDU 5739 Fantasia
    HDU 5738 Eureka
    HDU 5734 Acperience
    HDU 5742 It's All In The Mind
    POJ Euro Efficiency 1252
    AtCoder Beginner Contest 067 C
    AtCoder Beginner Contest 067 D
  • 原文地址:https://www.cnblogs.com/tfxz/p/12823674.html
Copyright © 2011-2022 走看看