The readyState
of a document can be one of following:
loading
The document
is still loading (that is, the HTML parser is still working).
interactive
The document has been parsed but sub-resources such as deferred and module scripts, images, stylesheets, and frames are still loading. Once in this state, and the deferred and module scripts have executed, the DOMContentLoaded
event fires.
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 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;
}
readystatechange as an alternative to DOMContentLoaded event
// Alternative to DOMContentLoaded event
document.onreadystatechange = () => {
if (document.readyState === "interactive") {
initApplication();
}
};
readystatechange as an alternative to load event
// Alternative to load event
document.onreadystatechange = () => {
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 Browser compatibility
Loadingâ¦
See alsoRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.5