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
readystatechange
eventDOMContentLoaded
eventload
event