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.
complete
The document and all sub-resources have finished loading. The state indicates that the load
event is about to fire.
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; }
// Alternative to DOMContentLoaded event document.onreadystatechange = function () { if (document.readyState === 'interactive') { initApplication(); } }
// Alternative to load event document.onreadystatechange = function () { if (document.readyState === 'complete') { initApplication(); } }
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
|
11
9-11
Internet Explorer 9 and 10 have bugs where the 'interactive' state can be fired too early before the document has finished parsing.
4-9
Only supports 'complete'.
|
11
Opera Presto fires 'complete' late after the 'load' event (in an incorrect order as per HTML5 standard specification).
|
1
|
1
|
18
|
4
|
11
Opera Presto fires 'complete' late after the 'load' event (in an incorrect order as per HTML5 standard specification).
|
1
|
1.0
|
readystatechange
eventDOMContentLoaded
eventload
event © 2005–2021 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