document.readyState

2018-03-08 09:53:39
(.readyState === ) {
   .();
}
{
   .(, .);
}

概述


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

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

  • loading / 加载

  • document 仍在加载。

  • interactive / 互动

  • 文档已经完成加载,文档已被解析,但是诸如图像,样式表和框架之类的子资源仍在加载。

  • complete / 完成

  • T文档和所有子资源已完成加载。状态表示 load 事件即将被触发。

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

 

语法

let string = document.readyState;// "complete"

例子

不同的准备状态

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 readydocument.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    initApplication();
  }}
// 模拟 load/onload 事件document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    initApplication();
  }}

相关链接

规范

  • 2020-03-22 21:16:07

    用vue做的跟随鼠标移动的div

    最近接到一个任务,就是在既存用electron-vue开发的桌面端程序上追加随鼠标移动的动画效果,之前一直使用angular和react,没怎么接触过vue,先做一个vue的简单例子,然后再整合。

  • 2020-03-23 15:16:30

    import,require具体用法

    import 和 require 是JS模块化编程使用的,是前端开发者们在性能探索中的又一大进步。

  • 2020-03-30 15:37:12

    PM2下使用 npm run 命令

    npm run xxxx 是 node常用的启动方式之一,本文介绍下如何用PM2来实现该方式的启动。 下面是项目的package.json文件部分代码:

  • 2020-04-01 10:15:11

    vue-cli3.0中vue.config.js的基本配置(去除esLint提示和解决build后静态文件路径报错)

    vue-cli是开发vue项目必不可少的脚手架工具,3.0版本之前的目录结构是由config目录的,关于webpack配置的文件都放在该目录里面,而3.0版本之后做了一个大更新,webpack相关的默认配置都帮你集成到webpack的npm 包里面去了,官方提供的一种修改配置的方式就是开发者自己在项目的根目录(与src同层级的目录)下建立一个vue.config.js的文件,然后去覆盖自定义的配置,达到你想要的效果,下面写一个基本的默认配置