W3cubDocs

/DOM

document.readyState

The Document.readyState property of a document describes the loading state of the document.

Values

The readyState of a document can be one of following:

loading: The document is still loading.
interactive: The document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.
complete: The document and all sub-resources have finished loading. The state indicates that the load event is about to fire.

When the value of this property changes a readystatechange event fires on the document object.

Syntax

var string = document.readyState;

Examples

Different states of readiness

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
    break;
}

readystatechange as an alternative to DOMContentLoaded event

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

readystatechange as an alternative to load event

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

readystatechange as event listener to insert or modify the DOM before DOMContentLoaded

// early manipulation of the document <body> using an external script
var bootstrap = function(evt){
  if (evt.target.readyState === "interactive") { initLoader(); }
  else if (evt.target.readyState === "complete") { initApp(); }
} 
document.addEventListener('readystatechange', bootstrap, false);

Specification

Specification	Status	Comment
WHATWG HTML Living Standard The definition of 'Document readiness' in that specification.	Living Standard
HTML5.1 The definition of 'Document readiness' in that specification.	Recommendation
HTML5 The definition of 'Document readiness' in that specification.	Recommendation	Initial specification.

Browser compatibility

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	5.0	(Yes)	4.0	8.0^[1]9.0^[2]	11.0[1]	^5.0

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	2.2	(Yes)	4.0	9^[2]	11.0^[1]	5.0

[1] Only support 'complete'. Opera Presto fire 'complete' late after the 'load' event (in an incorrect order as per HTML5 standard specification).

[2] Internet Explorer 9 and 10 have bugs where the 'interactive' state can be fired too early before the document has finished parsing.