Document.readyState

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

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

Syntax

let string = document.readyState;

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 scripts, 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.

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.
    // But sub-resources such as scripts, images, stylesheets and frames are still loading.
    const 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

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === 'interactive') {
    initLoader();
  }
  else if (event.target.readyState === 'complete') {
    initApp();
  }
});

Specifications

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

Browser compatibility

BCD tables only load in the browser

See also