Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM readyState Property
The DOM readyState property returns the loading status of the current HTML document. This property indicates whether the document is still loading, has finished loading, or has completed loading along with all sub-resources like images and stylesheets.
Syntax
Following is the syntax for the readyState property −
document.readyState
Return Value
The readyState property returns one of three possible string values −
"loading" − The document is still loading content.
"interactive" − The document has finished loading and parsing, but sub-resources like images may still be loading.
"complete" − The document and all sub-resources have finished loading.
Example − Basic readyState Check
Following example demonstrates how to check the current document's readyState −
<!DOCTYPE html>
<html>
<head>
<title>DOM readyState Property Demo</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f8f9fa;
}
.btn {
background-color: #007bff;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
margin: 10px;
}
.btn:hover { background-color: #0056b3; }
.result {
font-size: 18px;
margin-top: 20px;
padding: 15px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h1>DOM readyState Property Demo</h1>
<p>Check the current document's loading status:</p>
<button onclick="showStatus()" class="btn">Check readyState</button>
<div id="result" class="result"></div>
<script>
function showStatus() {
var state = document.readyState;
var message = "Current document state: <strong>" + state + "</strong>";
document.getElementById("result").innerHTML = message;
}
</script>
</body>
</html>
The output shows a button that displays the current readyState when clicked −
DOM readyState Property Demo Check the current document's loading status: [Check readyState] Current document state: complete
Example − Monitoring State Changes
Following example shows how to monitor readyState changes using the readystatechange event −
<!DOCTYPE html>
<html>
<head>
<title>readyState Change Monitor</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.log {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
padding: 15px;
border-radius: 4px;
margin-top: 20px;
font-family: monospace;
}
.loading { color: #856404; }
.interactive { color: #0c5460; }
.complete { color: #155724; }
</style>
</head>
<body>
<h1>Document readyState Monitor</h1>
<p>This page tracks readyState changes as the document loads:</p>
<div id="log" class="log"></div>
<script>
function logState(message) {
var log = document.getElementById("log");
var timestamp = new Date().toLocaleTimeString();
var className = document.readyState;
log.innerHTML += "<div class='" + className + "'>" +
timestamp + " - " + message + "</div>";
}
// Log initial state
logState("Initial readyState: " + document.readyState);
// Monitor readyState changes
document.addEventListener("readystatechange", function() {
logState("readyState changed to: " + document.readyState);
});
// Log when DOM content is loaded
document.addEventListener("DOMContentLoaded", function() {
logState("DOMContentLoaded event fired (readyState: " + document.readyState + ")");
});
// Log when page is fully loaded
window.addEventListener("load", function() {
logState("Window load event fired (readyState: " + document.readyState + ")");
});
</script>
</body>
</html>
This example logs all readyState transitions with timestamps, showing the progression from loading to complete.
Example − Using readyState for Conditional Logic
Following example demonstrates how to use readyState to execute different code based on the document's loading status −
<!DOCTYPE html>
<html>
<head>
<title>readyState Conditional Logic</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.status {
padding: 15px;
margin: 10px 0;
border-radius: 4px;
font-weight: bold;
}
.loading { background-color: #fff3cd; color: #856404; }
.interactive { background-color: #d1ecf1; color: #0c5460; }
.complete { background-color: #d4edda; color: #155724; }
</style>
</head>
<body>
<h1>Conditional Logic Based on readyState</h1>
<div id="status" class="status"></div>
<div id="content"></div>
<script>
function updateStatus() {
var statusDiv = document.getElementById("status");
var contentDiv = document.getElementById("content");
var state = document.readyState;
// Clear previous content
statusDiv.className = "status " + state;
switch(state) {
case "loading":
statusDiv.textContent = "? Document is loading...";
contentDiv.innerHTML = "<p>Please wait while content loads.</p>";
break;
case "interactive":
statusDiv.textContent = "? DOM is ready, sub-resources may still be loading";
contentDiv.innerHTML = "<p>DOM elements can be manipulated now!</p>";
break;
case "complete":
statusDiv.textContent = "? Document and all resources are fully loaded";
contentDiv.innerHTML = "<p><strong>Everything is ready!</strong> All images, stylesheets, and scripts have loaded.</p>";
break;
}
}
// Update status immediately
updateStatus();
// Update status on changes
document.addEventListener("readystatechange", updateStatus);
</script>
</body>
</html>
The output displays different messages and styles based on the current readyState, providing visual feedback about the loading progress.
Common Use Cases
The readyState property is commonly used in the following scenarios −
Script initialization − Determining if it's safe to manipulate DOM elements.
Loading indicators − Showing different UI states based on loading progress.
Performance monitoring − Tracking how long different loading phases take.
Progressive enhancement − Adding features as resources become available.
Browser Compatibility
The readyState property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. The readystatechange event is also widely supported for monitoring state transitions.
Conclusion
The DOM readyState property provides valuable information about the document's loading status with three states: "loading", "interactive", and "complete". It's essential for controlling script execution timing and creating responsive user interfaces that adapt to the document's loading progress.
229 Views
