Document.readyState

Résumé

La valeur Document.readyState est une propriété de document qui décrit l'état de chargement du document.

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 a été émis.
complete
Le document et toutes les sous-ressources ont été chargés, et load a été émis..

À chaque évolution de la valeur, un évenement readystatechange est émis dans l'objet document.

Syntaxe

var string = document.readyState;

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

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

  
Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5.0 (Oui) 4.0 4.0[3]8.0[1] 9.0[2] 11.0[1] 5.0
  
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.2 (Oui) 4.0 9[2] 11.0[1] 5.0

[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] A 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