Difference between DOMContentLoaded and load Events
Last Updated :
04 Oct, 2024
These two events In web development, the DOMContentLoaded and load events are used to detect when parts of the webpage are ready. The DOMContentLoaded event fires when the HTML is fully parsed and the DOM is ready, while the load event waits until all resources like images, scripts, and stylesheets are completely loaded.
DOMContentLoaded
The DOMContentLoaded event fires when the HTML document is fully loaded and parsed, meaning the DOM is ready, but before external resources like images and stylesheets are fully loaded. It allows scripts to execute as soon as the DOM is available.
Syntax
document.addEventListener("DOMContentLoaded", function(e) {
console.log("GfG page has loaded");
});Example : In this example the DOMContentLoaded event, logging a message when the page loads, and displays a centered image using inline CSS on an HTML page.
html
<!DOCTYPE html>
<html>
<head>
<title>
Output of DOMContentLoaded and Load events
</title>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (e) {
console.log("GfG page has loaded");
});
</script>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190328185307/gfg28.png"
style="align-content: center">
</body>
</html>
Output:
Advantages of using DOMContentLoaded event
- Faster execution: Scripts run as soon as the DOM is ready, without waiting for images or other resources to load.
- Improved user experience: Enables faster interaction with the page content.
- Efficient DOM manipulation: Ensures that scripts manipulate elements as soon as they are available.
- Reduces delays: Helps avoid unnecessary delays caused by waiting for non-critical resources like large images.
load Events
The load event fires when the entire webpage, including all dependent resources such as images, scripts, and stylesheets, is fully loaded. It ensures that everything is completely available before executing associated JavaScript functions or actions.
Syntax
document.addEventListener("load", function(e) {
console.log("The page has completely loaded.");
});Example : In this example the load event, logging a message when the entire page, including images, is fully loaded, displaying a centered image on the HTML page.
html
<!DOCTYPE html>
<html>
<head>
<title>
Load events
</title>
<script type="text/javascript">
document.addEventListener("load", function (e) {
console.log("GfG page has loaded completely");
});
</script>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190328185307/gfg28.png"
style="align-content: center">
</body>
</html>
Output
:
Advantages of using load event
- Ensures full content availability: Executes scripts after all resources are completely loaded.
- Prevents errors: Reduces potential errors caused by missing elements or resources.
- Supports media-heavy pages: Ideal for pages with large images, videos, or external assets.
- Improves script reliability: Ensures that scripts can access and manipulate all fully loaded resources.
Difference table between DOMContentLoaded and load Events
| Feature | DOMContentLoaded | load |
|---|
| Firing time | Fires when HTML is fully parsed and DOM is ready | Fires when the entire page, including resources, is fully loaded |
| External Resources | Doesn't wait for images, stylesheets, or frames | Waits for all external resources to fully load |
| Performance | Faster execution, improving page interactivity | Slower due to waiting for all resources to finish loading |
| Use Case | Suitable for early DOM manipulation | Best for handling resource-dependent operations |
| Common Usage | Interactivity setup, DOM-related scripts | Analytics, loading animations, media handling |
Similar Reads
Difference between body.onload() and document.ready() function The body.onload() event will be called once the DOM and all associated resources like images got loaded. Basically, onload() will be called when the page has been fully loaded with entire images, iframes and stylesheets, etc. For example, if our page contains a larger size image, so onload() event w
2 min read
Difference between textContent and innerText 1. textContent : This property is used to set or return the text value of the selected node and all its descendants. While setting the textContent property, any child nodes are removed. It is replaced by a single Text node containing the specified string. Syntax : To set the text of node - node.text
2 min read
What is the difference between DOM and BOM ? In this article, we will know about the Document Object Model (DOM) & Browser Object Model (BOM), along with understanding their basic implementation through the examples & the differences between them. Document Object Model (DOM) is a programming interface for HTML and XML documents, that a
5 min read
Difference between on() and live() or bind() in jQuery jQuery offers various event handlers like on(), live() and bind(). Though, there are some minor differences which are discussed below. bind() method: This method only attaches events to elements which exist beforehand i.e. state of initialized document before the events are attached. If the selector
3 min read
What is the difference between created and mounted event in VueJS? VueJS is a model- view-view-model JavaScript framework for building user interfaces and single-page applications. It has several lifecycle hooks (not more than 8). In this article, we are going to differentiate two types of events that are part of the lifecycle of a component. CreatedMounted And amo
2 min read