Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference between document load and DOMContentLoaded events in JavaScript
To verify whether a webpage has fully loaded, use the DOMContentLoaded and load events. However, there are some elements that influence people's choice for one over the other. Let's have a look at both of them and see how they function.
The basic HTML page is loaded and its parsing is completed when the DOMContentLoaded event is fired. Stylesheets, sub-frames, and other add-ons like photos and pictures are not delayed by this event until they have finished loading.
When a page has loaded completely, a different event called load should be invoked. When DOMContentLoaded is more appropriate, it is a common habit to use load instead.
DOM parsing is paused by synchronous JavaScript. JavaScript can be made asynchronous, and stylesheet loading can be optimised, if you wish the DOM to be parsed as quickly as possible once the user requests the page. Stylesheets that are loaded normally "steal" traffic from the main HTML content and slow down DOM parsing because they are loaded simultaneously.
Syntax
document.addEventListener("DOMContentLoaded", function(e) {
console.log("GfG page has loaded");
});
Example
In this example let us understand how the message, that indicates the completion of loading the DOM of the webpage. It is visible in the console log window right here in the following result, as can be seen below.
<!DOCTYPE html>
<html>
<title>Difference between document load and DOMContentLoaded events in JavaScript - TutorialsPoint
</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(e) {
console.log("TutorialsPoint page has loaded for you");
});
</script>
</head>
<body style="text-align: center">
<h3>Join one of the world’s largest online learning marketplaces.</h3>
<br>
<img src="https://www.tutorialspoint.com/images/logo.png">
</body>
</html>
Benefits of using the DOMContentLoaded event include
The user experience is enhanced when messages or content are displayed considerably more quickly.
Less time is needed for the page to load.
Document Load − Different methods of execution are used for load events. This event is finished when all of the webpage's elements, including the DOM hierarchy and related features like the CSS and JavaScript files, images and photographs, and external links, have loaded. Therefore, the load event essentially helps to figure out whenever the page has fully loaded.
Syntax
document.addEventListener("DOMContentLoaded", function(e) {
console.log("GfG page has loaded");
});
Example
The load event is fired for the window object after the entire webpage (HTML), including all supplementary resources like JavaScript, CSS, and pictures, has loaded completely. You use the addEventListener() function to create an event listener to handle the load event.
Historically, we have used the load event to execute scripts after the document has loaded. There are, however, other situations that might be more suitable.
DOMContentLoaded and load are the two major events. The former is triggered when all of the external resources, including images and stylesheets, have been loaded by the browser but the DOM tree has not yet been built, according to JavaScript.info, while the latter is triggered when all of the external resources, including images and stylesheets, have been loaded.
<!DOCTYPE html>
<html>
<title>Difference between document load and DOMContentLoaded events in JavaScript - TutorialsPoint
</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
document.addEventListener("load", function(e) {
console.log("TutorialsPoint page has loaded completely for you");
});
</script>
</head>
<body style="text-align: center">
<h3>Enroll now in the most popular and best rated courses at TutorialsPoint.</h3>
<br>
<img src="https://www.tutorialspoint.com/images/logo.png">
</body>
</html>
Benefits of using a load event
This event helps to figure out when each element of the webpage has loaded.
Example
The browser window is represented by the window object. When the element has done loading, the onload property handles load events. This is used along with the window element to run a script following the completion of the webpage's loading process. The handler function for this property is set to the function that needs to be run. As soon as the webpage has loaded, the function will be executed.
Syntax
window.onload = function exampleFunction() {
// Function to be executed
}
Example
<!DOCTYPE html>
<html>
<title>Difference between document load and DOMContentLoaded events in JavaScript - TutorialsPoint
</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<h2 style="color: rgb(6, 94, 119)">
Learn JavaScript with TutorialsPoint! </h2>
<strong>
In javascrip, how do I start a function when the page loads?
</strong>
<p>
The script has been already executed up. For the output, look at the console.
</p>
<script>
window.onload = function exampleFunction() {
console.log('Now, your script will load.');
}
</script>
</body>
</html>
2K+ Views
