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
How do I call a JavaScript function on page load?
This tutorial will teach us to call a JavaScript function on page load. In many cases, while programming with HTML and JavaScript, programmers need to call a function while loading the web page or after the web page load finishes. For example, programmers need to show the welcome message to the user on page load.
There are various ways to call a function on page load or after page load in JavaScript, and we will look at them one by one in this tutorial.
Using the onload event in the <body> tag
Using the window.onload Event
Using the DOMContentLoaded Event
Using the onload Event in the <body> Tag
The first approach for calling a function on the page load is to use an onload event inside the HTML <body> tag. When all HTML body content loads in the web browser, it will call the function from JavaScript.
Syntax
Follow the below syntax to use onload event in the <body> tag.
<body onload="functionToCall()">
// HTML content
</body>
Example
In the below example, we have created the JavaScript function named welcomeFunction(). We are calling that function from the <body> tag using the onload event.
<!DOCTYPE html>
<html>
<head>
<title>Call JavaScript function on page load</title>
</head>
<body onload="welcomeFunction()">
<h2>Methods to call a JavaScript function on page load</h2>
<h4>Call the JavaScript function on page load by using <i>onload</i> event in the HTML body tag</h4>
<div id="message"></div>
<script type="text/javascript">
let message = document.getElementById("message");
function welcomeFunction() {
alert("Welcome to TutorialsPoint!");
message.innerHTML = "Function executed successfully on page load.";
}
</script>
</body>
</html>
When users run the example code, they will see the welcome message in the alert box. After the function execution completes, the message will be displayed on the page.
Using the window.onload Event in JavaScript
The second approach for calling the function on page load uses the window object. Every web page contains the window object by default, which represents the global scope. We can use the onload property of the window object to execute functions after the page loads completely.
By using the window.onload property, users can either call a named function or bind an anonymous function that will execute after the page load.
Syntax
Users can follow the below syntax to use the window.onload to call a function on page load.
Syntax for anonymous function:
window.onload = function() {
// code to execute on the page load
};
Syntax for named function:
function simpleFunction() {
// function body
}
window.onload = simpleFunction;
Example
In the below example, we are calling the named function on the page load using the window.onload property.
<!DOCTYPE html>
<html>
<head>
<title>Call JavaScript function on page load</title>
</head>
<body>
<h2>Methods to call a JavaScript function on page load</h2>
<h4>Call the JavaScript function on page load by using <i>window.onload</i> event in JavaScript</h4>
<div id="message"></div>
<script type="text/javascript">
let message = document.getElementById("message");
window.onload = function() {
simpleFunction(10, 20);
};
function simpleFunction(num1, num2) {
alert("The sum of num1 and num2 is " + (num1 + num2));
message.innerHTML = "Showing the message after alert box.";
}
</script>
</body>
</html>
Using the DOMContentLoaded Event
JavaScript provides event listeners to call functions when specific events trigger. In this approach, we use the "DOMContentLoaded" event with the addEventListener() method. This event fires when the HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
Syntax
To use the DOMContentLoaded event, follow the below syntax:
document.addEventListener("DOMContentLoaded", function() {
// function body
});
Example
The below example demonstrates the use of the DOMContentLoaded event to trigger a function call on page load.
<!DOCTYPE html>
<html>
<head>
<title>Call JavaScript function on page load</title>
</head>
<body>
<h2>Methods to call a JavaScript function on page load</h2>
<h4>Call the JavaScript function on page load by using <i>document.addEventListener()</i> method</h4>
<div id="message"></div>
<script type="text/javascript">
let message = document.getElementById("message");
document.addEventListener("DOMContentLoaded", function() {
functionCall();
});
function functionCall() {
alert("Function call on the page load.");
message.innerHTML = "Function body executed successfully on page load.";
}
</script>
</body>
</html>
Comparison of Methods
| Method | Timing | Best For |
|---|---|---|
onload in body tag |
After all content loads | Simple HTML pages |
window.onload |
After all resources load | When images/resources matter |
DOMContentLoaded |
After DOM is ready | Modern web development (recommended) |
Conclusion
We have explored three approaches to call JavaScript functions on page load. The DOMContentLoaded event is the most recommended approach as it fires as soon as the DOM is ready, providing better performance than waiting for all resources to load.
62K+ Views
