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.
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.
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.
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; }
js
// Alternative to DOMContentLoaded event document.onreadystatechange = () => { if (document.readyState === "interactive") { initApplication(); } };
js
// Alternative to load event document.onreadystatechange = () => { if (document.readyState === "complete") { initApplication(); } };
js
document.addEventListener("readystatechange", (event) => { if (event.target.readyState === "interactive") { initLoader(); } else if (event.target.readyState === "complete") { initApp(); } });
Specification |
---|
HTML Standard # current-document-readiness |
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 | 119–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 |
© 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