To call a JavaScript function on page load, you can attach the onload event handler property to the global window object and assign any function to it that you want to execute on the page load.
The load event is fired as soon as the whole page finishes loading and any function assigned to the window.onload property will be called instantly.
For example,
// Will trigger as soon as page finishes loading
window.onload = function(){
// Call any function you want
myFun();
}
function myFun(){
alert('The page has finished loading.');
}
Below is the outcome of the above code:
In this example, we have attached an anonymous function to the onload property of the window object. This anonymous function will be invoked instantly after the page finishes loading.
You can then add any function or business logic inside the anonymous function that will be executed right after the page finish loading.
Instead of the anonymous function, you can also attach a named function to the window.onload property.
Something like this:
// Function someFunc() will be triggered on page load
window.onload = someFunc;
// Define your function
function someFunc(){
alert('The page has finished loading.');
// Add your stuff
}
In this example, the named function someFunc() will be triggered right after the page finish loading.
Although this approach looks simple still we do not recommend it. That’s because the returned value of the named function will be assigned to the window.onload property.
Also, if there are other functions that are listening to the load event, will not be invoked.
Method 2: By Adding the onload Attribute in the Body Tag
You can also add the onload attribute directly to the <body> tag and assign the function(s) that should be executed right after the page finishes loading.
In the following example, we have assigned a function afterPageLoad() to the onload attribute of the <body> tag. This function will be called as soon as the page finish loading its content.
<body onload="afterPageLoad()">
<!--Add your stuff here-->
</body>
Next, you need to define the afterPageLoad() function in your JS file:
// Define the function
function afterPageLoad(){
alert('The page has finish loading.');
// Add your stuff
}
If you want to execute multiple functions on page load, you need to separate them with a semicolon(;) inside the onload attribute.
For example,
<body onload="fun1();fun2();">
<!--Add your stuff here-->
</body>
Define these functions in the JS file:
function fun1(){
alert('Fun1 is called');
}
function fun2(){
alert('Fun2 is called');
}
Output:
The functions will be executed in the order they are written inside the onload attribute.
In our case, the function fun1() will be executed before fun2().
Final Thoughts
In this article, we discussed how we can call a JavaScript function as soon as the page finish loading its content.
You have two ways to do it. First, use the window.onload property and second insert the onload attribute into the <body> tag.
You can actually go with any of the two approaches. However, you should always prefer the first approach over the second.
That’s because we should always avoid adding any JavaScript code in our HTML elements be it a function call or anything else.
That’s all for this article. Thanks for reading!
