Document : propriété 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 propriété readyState de l'interface Document décrit l'état de chargement du document.
Lorsque la valeur de cette propriété change, un évènement readystatechange est déclenché sur l'objet document.
Valeur
L'état readyState d'un document peut être l'un des suivants :
loading-
Le
documentest encore en cours de chargement (c'est-à-dire que l'analyseur HTML est encore en train de travailler). interactive-
Le document a été analysé, mais les sous-ressources telles que les scripts différés et les scripts de module, les images, les feuilles de style et les cadres sont encore en cours de chargement. Une fois dans cet état, et après l'exécution des scripts différés et des modules, l'évènement
DOMContentLoadedest déclenché. complete-
Le document et toutes les sous-ressources ont été chargés. L'état indique que l'évènement
loadest sur le point de se déclencher.
Exemples
Différents états de chargement
switch (document.readyState) {
case "loading":
// Encore en chargement.
break;
case "interactive": {
// Le document a fini de se charger et nous pouvons accéder aux éléments DOM.
// Les sous-ressources telles que les scripts, les images, les feuilles de style et les cadres sont encore en cours de chargement.
const span = document.createElement("span");
span.textContent = "Un élément <span>.";
document.body.appendChild(span);
break;
}
case "complete":
// La page est pleinement chargée.
console.log(
`La première règle CSS est : ${document.styleSheets[0].cssRules[0].cssText}`,
);
break;
}
readystatechange comme alternative à DOMContentLoaded
// alternative à DOMContentLoaded
document.onreadystatechange = () => {
if (document.readyState === "interactive") {
initApplication();
}
};
readystatechange comme alternative à load
// alternative à load
document.onreadystatechange = () => {
if (document.readyState === "complete") {
initApplication();
}
};
readystatechange comme écouteur d'évènement pour insérer ou modifier le DOM avant DOMContentLoaded
document.addEventListener("readystatechange", (event) => {
if (event.target.readyState === "interactive") {
initLoader();
} else if (event.target.readyState === "complete") {
initApp();
}
});
Spécifications
| Specification |
|---|
| HTML # current-document-readiness |
Compatibilité des navigateurs
Voir aussi
- Les évènements associés :