What are the possible values in Document.readyState?

Question

I noticed in the documentation of MDN, as in the documentation of W3 (not to be confused with w3schools)

• loading document still loading
• Interactive the document has already completed loading and the "document" has already been processed, but images, styles and frames are still loading
• complete the document and resources have already been loaded, this state indicates the same as the event (on)load

However when accessing the W3.org website I noticed this message:

This Definition is non-normative. Implementation Reports are Given Below this Definition.

And on the website of MSDN I noticed that "API" shows two more "possible" values":

• uninitialized The object was not started with the data
• Loaded Object finished loading data

I didn’t quite get the message from loaded, for being in English maybe, but if I understood correctly it is that the "HTML" structure was downloaded but not rendered, this would be it?

Another doubt, or better the main doubt, uninitialized and loaded are available on Node.onreadystatechange or these values are only available in the API to develop something like a "webView" (or even an own browser) using the interface IHTMLDocument2?

Additional: If by chance these values are available in IE besides the API, they will also be available possibly in other browsers?

Answer 1

Document.readyState:

The Document.readyState aims to identify the upload status of a document. It is used to interact with the page in certain loading states. It is used based on notable reference events by performance tools and Apis. This metric is reported by browsers.

Document.readyState has three possible response states (Loaded, Interactive, complete):

Loaded:

Informs if a document is being loaded (Loaded).

loading:

States at run time of readyState:

That is, when the document.readyState has a "loading" status, meaning that the document (for example an index.html type html file) is being parsed and treated to provide a state.

Other page sub-features are not yet a factor because the initial document is just starting to parse, so the browser doesn’t know if they exist.

The html itself is currently downloaded (the browser has html), but is being processed...

The date/time stamp of the "domLoading" navigation sync API is triggered immediately before the document has a loading status.

Interactive:

When document.readyState has an "Interactive" status, meaning that the document is now parsed and loaded, but sub-features like CSS and images are still being uploaded or analyzed. When document.readyState reports that it is interactive, also means that the event DOMContentLoaded was triggered.

Interacting with the readyState:

For each change in Document.readyState (for example, if readyState changes from "loading" to "interactive"), an event readystatechange is triggered in the document object. Using the event readystatechange, we can interact with these "changes".

Example:

// alternativa para carregar o evento
document.onreadystatechange = function () {
   if (document.readyState == "complete") {
       initApplication();
    }
}

complete:

When document.readyState has a "complete" status, meaning that the document is now parsed and loaded and all known document sub-resources, such as CSS and images, have been parsed and uploaded. When Document.readyState reports that it is complete, it also means that the load event has been triggered.

In human terms:

Document.readyState tells us what stage the page loading is at. It’s the browser version of "Are we there yet?" (We’ve arrived.?).

This information can be used to interact with the page while it is at different stages of loading a page.

Briefly: in general, you will only use the readyState as a state conditional, to interact with your object being rendered...

A way to capture all possible events of a given event with the document.readyState, in case I am capturing events of a GET request by ajax:

function handler() {
  console.log(this.readyState)
  //0 (não inicializado => uninitialized | esse é antes de qualquer estado, então ele não será impresso aqui dentro, pois ele não passa pelo onreadystatechange) 
  //1 (a carregar => loading) 
  //2 (carregado => loaded) 
  //3 (interactivo => interactive) 
  //4 (completo => complete)
}

var client = new XMLHttpRequest();
client.onreadystatechange = handler;
client.open("GET", "https://www.google.com");
client.send();

Curiosity: If, for example, you run the above code only on your browser console, probably the 1 and the 4 will only be defined, because 2 and 3 are not only seen by the console.

Answer 2

The possible values are:

• uninitialized
• loading
• Loaded
• Interactive
• complete

Reference w3schools