initial commit

1 files changed, 130 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/document/readystate/index.html b/files/zh-cn/web/api/document/readystate/index.html
new file mode 100644
index 0000000000..cc4336dddb
--- /dev/null
+++ b/files/zh-cn/web/api/document/readystate/index.html
@@ -0,0 +1,130 @@
+---
+title: document.readyState
+slug: Web/API/Document/readyState
+tags:
+  - API
+  - DOMContentLoaded
+  - Document.readyState
+  - HTML DOM
+  - load
+  - onload
+  - readyState
+  - 参考
+  - 属性
+translation_of: Web/API/Document/readyState
+---
+<p>{{APIRef("DOM")}}{{ gecko_minversion_header("1.9.2") }}</p>
+
+<p><strong><code>Document.readyState</code> </strong>属性描述了{{ domxref("document") }} 的加载状态。</p>
+
+<p>当该属性值发生变化时，会在 {{domxref("document")}} 对象上触发 {{event("readystatechange")}} 事件。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre>var <var>string</var> = <var>document</var>.readyState;</pre>
+
+<h3 id="值">值</h3>
+
+<p>一个文档的 <code><strong>readyState</strong></code> 可以是以下之一：</p>
+
+<dl>
+ <dt><code>loading</code>（正在加载）</dt>
+ <dd>{{ domxref("document") }} 仍在加载。</dd>
+ <dt><code>interactive</code>（可交互）</dt>
+ <dd>文档已被解析，"<strong>正在加载</strong>"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。</dd>
+ <dt><code>complete</code>（完成）</dt>
+ <dd>文档和所有子资源已完成加载。表示 {{event("load")}} 状态的事件即将被触发。</dd>
+</dl>
+
+<h2 class="editable" id="示例">示例</h2>
+
+<h3 id="不同的准备状态">不同的准备状态</h3>
+
+<pre class="brush:js ">switch (document.readyState) {
+  case "loading":
+    // 表示文档还在加载中，即处于“正在加载”状态。
+    break;
+  case "interactive":
+    // 文档已经结束了“正在加载”状态，DOM元素可以被访问。
+    // 但是像图像，样式表和框架等资源依然还在加载。
+    var span = document.createElement("span");
+    span.textContent = "A &lt;span&gt; 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;
+}</pre>
+
+<h3 id="模拟_DOMContentLoaded_事件的_readystatechange">模拟 DOMContentLoaded 事件的 readystatechange</h3>
+
+<pre class="brush:js ">// 模拟 DOMContentLoaded/ jquery ready
+document.onreadystatechange = function () {
+  if (document.readyState === "interactive") {
+    initApplication();
+  }
+}</pre>
+
+<h3 id="模拟_load_事件的_readystatechange">模拟 load 事件的 readystatechange</h3>
+
+<pre class="brush: js ">// 模拟 load 事件
+document.onreadystatechange = function () {
+  if (document.readyState === "complete") {
+    initApplication();
+  }
+}</pre>
+
+<h3 id="在_DOMContentLoaded_之前使用_readystatechange_作为事件处理程序以插入或修改DOM">在 DOMContentLoaded 之前使用 readystatechange 作为事件处理程序以插入或修改DOM</h3>
+
+<pre>document.addEventListener('readystatechange', event =&gt; {
+  if (event.target.readyState === 'interactive') {
+    initLoader();
+  }
+  else if (event.target.readyState === 'complete') {
+    initApp();
+  }
+});
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><strong>规范</strong></th>
+   <th scope="col"><strong>状态</strong></th>
+   <th scope="col"><strong>注释</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.Document.readyState")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{event("readystatechange")}} event</li>
+ <li>{{event("DOMContentLoaded")}} event</li>
+ <li>{{event("load")}} event</li>
+</ul>