In this section, we will learn what the document readyState property is and how to use it in JavaScript.

What is document readyState Property in JavaScript?

The JavaScript document readyState property is used to check the status of a document that is being loaded on a page.

For example, an HTML document might be in a “loading” state and that means part of the document is loaded but the rest is yet to come. Or the state of a document might be in an “interactive” which means enough of the document is loaded so that users can interact with that document but still part of it is being downloaded to be displayed.

document readyState Property Syntax:

document.readyState;

document readyState Property Input Value

The property is read-only which means you can’t set a value for it.

document readyState Property Return Value

The return value of this property could be either of these values:

• uninitialized: this value means the browser has not started the loading process yet.
• loading: this value means the document is being loaded.
• loaded: this value means the document is loaded but not completely displayed.
• interactive: this value means enough of the document is loaded so that users can interact with that document, but the process is not complete yet.
• complete: this value means the document is fully loaded and displayed.

Example: using document readyState Property in JavaScript

See the Pen using document readyState Property in JavaScript by Omid Dehghan (@odchan1) on CodePen.