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
Difference between document load and DOMContentLoaded events in JavaScript
In JavaScript, understanding when to use DOMContentLoaded versus load events is crucial for optimal web performance. Both events help determine when different parts of a webpage have finished loading, but they trigger at different stages of the loading process.
DOMContentLoaded Event
The DOMContentLoaded event fires when the HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This makes it ideal for DOM manipulation scripts that don't depend on external resources.
Syntax
document.addEventListener("DOMContentLoaded", function(e) {
console.log("DOM is ready");
});
Example: DOMContentLoaded Event
<!DOCTYPE html>
<html>
<head>
<title>DOMContentLoaded Example</title>
<script>
document.addEventListener("DOMContentLoaded", function(e) {
console.log("DOM is ready - can manipulate elements now");
document.getElementById("message").innerHTML = "DOM loaded successfully!";
});
</script>
</head>
<body>
<h3>DOMContentLoaded Event Example</h3>
<p id="message">Waiting for DOM...</p>
<img src="/images/logo.png" alt="Large image">
</body>
</html>
DOM is ready - can manipulate elements now
Document Load Event
The load event fires when the entire page has finished loading, including all CSS, images, scripts, and other external resources. This event is triggered on the window object, not the document.
Syntax
window.addEventListener("load", function(e) {
console.log("Everything has loaded");
});
// Alternative syntax
window.onload = function() {
console.log("Page fully loaded");
};
Example: Load Event
<!DOCTYPE html>
<html>
<head>
<title>Load Event Example</title>
<script>
window.addEventListener("load", function(e) {
console.log("All resources loaded - images, CSS, scripts");
document.getElementById("status").innerHTML = "Page fully loaded!";
});
</script>
</head>
<body>
<h3>Load Event Example</h3>
<p id="status">Loading resources...</p>
<img src="/images/logo.png" alt="Logo">
</body>
</html>
All resources loaded - images, CSS, scripts
Timing Comparison Example
<!DOCTYPE html>
<html>
<head>
<title>Event Timing Comparison</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("1. DOMContentLoaded fired - DOM ready");
});
window.addEventListener("load", function() {
console.log("2. Load fired - all resources loaded");
});
</script>
</head>
<body>
<h3>Check console for event firing order</h3>
<img src="/images/logo.png" alt="Logo">
</body>
</html>
1. DOMContentLoaded fired - DOM ready 2. Load fired - all resources loaded
Key Differences
| Aspect | DOMContentLoaded | Load |
|---|---|---|
| Target | document | window |
| Timing | DOM parsing complete | All resources loaded |
| Waits for images? | No | Yes |
| Waits for CSS? | No | Yes |
| Performance | Faster | Slower |
When to Use Each Event
Use DOMContentLoaded when:
You need to manipulate DOM elements immediately
Your script doesn't depend on images or external stylesheets
You want faster initial page interactivity
Use Load when:
You need to work with image dimensions or properties
Your script depends on all resources being fully loaded
You're measuring complete page load time
Conclusion
Choose DOMContentLoaded for better performance when you only need DOM access, and use load when you need all resources loaded. DOMContentLoaded typically fires much faster, improving user experience.
3K+ Views
