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
131
|
---
title: Document.readyState
slug: Web/API/Document/readyState
tags:
- API
- DOM
- HTML
- Référence(2)
translation_of: Web/API/Document/readyState
---
<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div>
<p>La valeur <strong>Document.readyState</strong> est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document.</p>
<p>À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox notranslate">var <var>string</var> = <var>document</var>.readyState;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<p>La variable <code>readyState</code><strong> </strong>peut valoir :</p>
<dl>
<dt><code><strong>loading</strong></code></dt>
<dd>Le {{ domxref("document") }} est encore en chargement.</dd>
<dt><code><strong>interactive</strong></code></dt>
<dd>Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis.</dd>
<dt><code><strong>complete</strong></code></dt>
<dd>Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis.</dd>
</dl>
<h2 id="Exemples"><span>Exemples</span></h2>
<h3 id="Différents_états_de_chargement">Différents états de chargement</h3>
<pre class="brush: js notranslate"><span>switch (document.readyState) {
case "loading":
// Encore en chargement.
break;
case "interactive":
// Le DOM est construit, on peut y accéder.
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
case "complete":
// La page est pleinement chargée.
console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
break;
}</span>
</pre>
<h3 id="readystatechange_comme_alternative_à_DOMContentLoaded">readystatechange comme alternative à DOMContentLoaded</h3>
<pre class="brush:js notranslate">// alternative à DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
}</pre>
<h3 id="readystatechange_comme_alternative_à_load">readystatechange comme alternative à load</h3>
<pre class="brush: js notranslate">// alternative à load
document.onreadystatechange = function () {
if (document.readyState == "complete") {
initApplication();
}
}</pre>
<h3 id="readystatechange_comme_event_listener_pour_insérer_ou_modifier_le_DOM_avant_DOMContentLoaded">readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded</h3>
<pre class="brush: js notranslate">// Modification du document <body> dès que possible en utilisant un script externe
var bootstrap = function(evt){
if (evt.target.readyState === "interactive") { initLoader(); }
else if (evt.target.readyState === "complete") { initApp(); }
}
document.addEventListener('readystatechange', bootstrap, false);
</pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="spectable standard-table">
<tbody>
<tr>
<th scope="col">Spécifications</th>
<th scope="col">Status</th>
<th scope="col">Commentaires</th>
</tr>
<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>Spécification initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div>{{Compat("api.Document.readyState")}}</div>
<div id="compat-desktop"></div>
<p>[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5).</p>
<p>[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' <a href="https://bugs.jquery.com/ticket/12282">peut être notifié trop tôt</a> avant que le document soit entièrement analysé.</p>
<p>[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML.</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>L'événement {{event("readystatechange")}}</li>
<li>L'événement {{event("DOMContentLoaded")}}</li>
<li>L'événement {{event("load")}}</li>
</ul>
|
