Document.readyState
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La valeur Document.readyState est une propriété de document qui décrit l'état de chargement du document.
À chaque évolution de la valeur, un évenement readystatechange est émis dans l'objet document.
Syntaxe
js
var string = document.readyState;
Valeurs
La variable readyState peut valoir :
loading-
Le
documentest encore en chargement. interactive-
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
DOMContentLoadeda été émis. complete-
Le document et toutes les sous-ressources ont été chargés, et
loada été émis.
Exemples
Différents états de chargement
js
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;
}
readystatechange comme alternative à DOMContentLoaded
js
// alternative à DOMContentLoaded
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
};
readystatechange comme alternative à load
js
// alternative à load
document.onreadystatechange = function () {
if (document.readyState == "complete") {
initApplication();
}
};
readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded
js
// 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);
Spécifications
| Specification |
|---|
| HTML # current-document-readiness |
Compatibilité des navigateurs
Chargement…
Voir aussi
- L'événement
readystatechange - L'événement
DOMContentLoaded - L'événement
load