Document: readyState property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

TheDocument.readyState property describes the loading state of thedocument.When the value of this property changes, areadystatechange event fires on thedocument object.

Value

ThereadyState of a document can be one of following:

loading: Thedocument is still loading (that is, the HTML parser is still working).
interactive: The document has been parsed but sub-resources such asdeferred andmodule scripts, images, stylesheets, and frames are still loading. Once in this state, and the deferred and module scripts have executed, theDOMContentLoaded event fires.
complete: The document and all sub-resources have finished loading. The state indicates that theload event is about to fire.

Examples

Different states of readiness

switch (document.readyState) {  case "loading":    // The document is loading.    break;  case "interactive": {    // The document has finished loading and we can access DOM elements.    // 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 eventdocument.onreadystatechange = () => {  if (document.readyState === "interactive") {    initApplication();  }};

readystatechange as an alternative to load event

// Alternative to load eventdocument.onreadystatechange = () => {  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();  }});