HTML | DOM readyState 属性

简介

readyState 属性是 Document 接口的一部分，用于表示文档的加载状态。它可以返回文档的加载状态，可能的值有：

| 值 | 描述 | | --------------- | ------------------------------------------------------------------ | | "loading" | 文档仍在加载。 | | "interactive" | 文档已经被解析，但是诸如图像、样式表和框架之类的子资源仍在加载中。 | | "complete" | 文档和所有子资源已完成加载。 |

用法

可以通过以下方式访问到 readyState 属性：

document.readyState

当文档的加载状态发生改变时，可以利用 readystatechange 事件来检测。每次状态改变触发 readystatechange 事件，可以将其与 readyState 属性结合使用来执行某些特定任务，例如在文档加载完成后执行某些特定操作。

示例：

document.addEventListener('readystatechange', function() {
  if(document.readyState === 'complete') {
    console.log('页面加载完成！');
  }
});

当页面加载完成时，控制台会输出“页面加载完成！”。

注意事项

1. 在 DOMContentLoaded 和 readystatechange 事件中，readyState 的值可能不同。如果需要确保所有子资源已经加载完成，应该使用 readystatechange 事件。
2. 在旧版的 IE 中，DOMContentLoaded 事件未被支持，应使用 readystatechange 事件。
3. 在某些情况下 loading 会跳过，例如在渲染过程的某些特定阶段。

参考链接

• Document.readyState
• 页面加载原理