Document.readyState

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 (en-US) est émis dans l'objet document.

Syntaxe

var string = document.readyState;

Valeurs

La variable readyState peut valoir :

loading: Le document est 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 DOMContentLoaded (en-US) a été émis.
complete: Le document et toutes les sous-ressources ont été chargés, et load (en-US) a été émis.

Exemples

Différents états de chargement

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

// alternative à DOMContentLoaded
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

readystatechange comme alternative à load

// alternative à load
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    initApplication();
  }
}

readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded

// 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

Spécifications	Status	Commentaires
HTML Living Standard La définition de 'Document readiness' dans cette spécification.	Standard évolutif
HTML 5.1 La définition de 'Document readiness' dans cette spécification.	Recommendation
HTML5 La définition de 'Document readiness' dans cette spécification.	Recommendation	Spécification initiale.

Compatibilité des navigateurs

BCD tables only load in the browser

[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).

[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' peut être notifié trop tôt avant que le document soit entièrement analysé.

[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.

Voir aussi

L'événement readystatechange (en-US)
L'événement DOMContentLoaded (en-US)
L'événement load (en-US)