Document.readyState

Summary

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 has been fired.

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

Syntax

JavaScript
var string = document.readyState;

Examples

Different states of readiness

JavaScript
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

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

readystatechange as an alternative to load event

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

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.
Working Draft  
HTML5
The definition of 'Document readiness' in that specification.
Recommendation Initial specification.

See also

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/document/readystate

API HTML DOM NeedsBrowserAgnosticism NeedsCompatTable Property Reference Référence