Loading State

# readyState
The **`readyState` property** of the document objects denotes the current state of the document (`document.readyState` tells us the status of the page load).
There are 3 different possible states:

![](/api/edpresso/shot/5875524053762048/image/5362717809967104)
* `loading` — The document is #key# loading:the .html file is being downloaded/parsed #key#.
* `interactive` — In this state, the DOM is loaded and accessible. However, resources like images, stylesheets, and JavaScript files will not have finished downloading/loading/parsing.
* `complete` — The document and all resources (like images/stylesheets have finished loading).

Let’s look at an example. We have a website `educative.io`, let’s compare the readyState when we type the URL in the browser and hit enter.

## 1. Loading

In this state, the document is #key# constructing its elements: parsing DOM #key#.
## 2. Interactive

If the `readyState` is interactive, then the DOM is loaded, but resources like script, img, and css files will still be downloading. The `DOMContentLoaded` event is also fired when the readyState changes from loading to `interactive`. Once the state is `interactive`, we can access the DOM elements.


## 3. Complete

When `readyState` is changed to complete, it means that the document is now parsed and loaded, and all known additional resources like CSS, images, and JS have also been parsed and loaded.

## readyStateChange event

To detect the state change, we can add the `readyStateChange` event listener to the document.


```js
document.addEventListener('readystatechange', function(ev) {
    console.log(document.readyState)
});
```

---

# Example 

Below is an example that shows how to print the ready state in the console.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <script>

    console.log("current state " + document.readyState);

    document.addEventListener('readystatechange',function (ev) {
      console.log("statechange- current state is " + document.readyState);
    })
    document.addEventListener("DOMContentLoaded", function(ev){
        console.log("DOM_LOADED");
    });
    
  </script>
</body>
</html>

codemirror

console

What is the browser readyState document in JavaScript? 

The readyState property denotes the document's loading phase: loading, interactive, or complete, with each representing its resource load status.