blob: cc4336dddbf9472138fcf8145a8f624d294b10cd (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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 <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;
}</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 => {
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>
|
