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
var 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 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 images, stylesheets and frames are still loading. 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
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
readyState | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 4 | IE
Full support
11
| Opera
Full support
11
| Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android
Full support
11
| Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.
See also
readystatechange
eventDOMContentLoaded
eventload
event