What is Document.readyState?
- Document.readyState identifies the loading status of a document.
- Used by developers to interact with page at certain loading states.
- Used as notable reference events by performance tools and APIs.
- This metric is reported by browsers.
Document.readyState has three possible states. It tells us if a document is loading, interactive or complete.
Loading
When document.readyState has a status of "loading", it means that the document (example: html file) is being parsed and dealt with.
Other subresources for page are not a factor yet because the initial document is has just begun parsing, so the browser does not know if they exist.
The html itself is currently downloaded (the browser has the html), but it is being processed.
The Navigation timing API time stamp "domLoading" fires right before the document has a status of loading.
Interactive
When document.readyState has a status of "interactive", it means that the document (example: html file) is now parsed and loaded, but subresources like CSS and images are still being loaded or parsed.
When document.readyState reports it is interactive, it also means that DOMContentLoaded event has been fired.
Complete
When document.readyState has a status of "complete", it means that the document (example: html file) is now parsed and loaded and all known document subresources like CSS and images have been parsed and loaded.
When document.readyState reports it is complete, it also means that the load event has been fired.
Interacting with readyState
For each change that happens to document.readyState (for example if the readyState changes from "loading" to "interactive") a readystatechange event fires on the document object.
Using the readystatechange event we can interact with these changes.
Document.onreadystatechange
Here is the example from the MDN 1 readyState page...
// alternative to load event
document.onreadystatechange = function () {
if (document.readyState == "complete") {
initApplication();
}
}
Specification
WHATWG HTML Living Standard - current document readiness.
In human terms
Document.readyState tells us at what stage the page load is at. It is the browser version of "Are we there yet?".
This information can be used to interact with the page while it is at different stages of loading a page.
by