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

当该属性值发生变化时,会在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();
  }
}

这个readystatechange事件,让我想起了ajax中的。xhr.onreadystatechange。

发布了58 篇原创文章 · 获赞 0 · 访问量 7012

猜你喜欢

转载自blog.csdn.net/Mweb_demo/article/details/101427336