W3cubDocs

/Web APIs

Document: readyState property

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.

Value

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. The state indicates that the DOMContentLoaded event is about to fire.

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

js

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

js

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

readystatechange as an alternative to load event

js

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

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

js

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
readyState 1 12 3.6 11
9–11Internet Explorer 9 and 10 have bugs where the 'interactive' state can be fired too early before the document has finished parsing.
4–9Only supports 'complete'.
11Opera Presto fires 'complete' late after the 'load' event (in an incorrect order as per HTML5 standard specification).
1 4.4 18 4
11Opera Presto fires 'complete' late after the 'load' event (in an incorrect order as per HTML5 standard specification).
1 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState