How to Run a Function When the Page is Loaded in JavaScript?

To execute a JavaScript function when a web page has been completely loaded is rather easy. There are multiple ways of achieving this task, some of which include adding lines in the HTML element tags, and some include using DOM functions and state variables in our script code snippet.

This article will use the following methods to achieve the task at hand:

Using onload event on the windows interface variable
Putting an onload attribute inside the <body> tag
Defining a custom event listener on the window interface variable
Using document.onreadystatechange attribute

Let’s start with the first one.

Method 1: Window onload event

The onload () event can be used with any element of an HTML page, and it will perform the actions given inside it after that element has been fully loaded. To run a function only after the whole “window” has been loaded, use the “window.onload” property in the script file and set it equal to a function as

window.onload = function () {
alert("Page has been loaded");
};

In the function, an alert is being sent that says “Page has been loaded”. Execute the HTML webpage and observe the following results:

It is clear from the output that the function was executed after the browser fully loaded the webpage’s “window”.

Method 2: Using the onload attribute with the body tag

As the body tag includes all of that data that is displayed on the web browser, therefore putting an onload attribute and setting it equal to a function in that tag would essentially mean executing the function after everything on the webpage has been fully loaded.

For example, create an HTML Webpage with these lines:

<body onload="fullyLoaded()">
<div class="container">
<div class="flex-box">
<div class="flex-item1">
<img src="https://linuxhint.com/wp-content/uploads/2019/11/Logo-final.png"
alt=""
/>
</div>
<div class="flex-item2">
<p class="sec">
How to run a function when the page is loaded in JavaScript ?
</p>
</div>
</div>
</div>
<br />

<center>
<p>This is an example of body onload attribute</p>
</center>
</body>

The key point here is that in the body that we have used the attribute onload = “fullyLoaded()”. This will cause the webpage to look for a “fullyLoaded()” function in the script after all the elements inside the webpage’s <body> have been loaded.

Head inside the script file, and add in the following lines:

function fullyLoaded() {
alert("The webpage has been completely Loaded!");
}

Execute the HTML, and the output on the browser will look like this:

The user is prompted after the body tag, and all the elements inside the body tag have been fully loaded.

Method 3: Adding an event listener on the “window” interface variable

One of the oldest methods yet still effective. In the JavaScript file, simply add an event listener using the dot operator with our “window” interface variable. The state inside the event listener will be “load” and upon that state change, define a function to be executed. All this is achieved by using the following lines:

window.addEventListener("load", function () {
alert("It's loaded!");
});

After that, simply load up the HTML webpage in the browser, and observe the following output:

The user is prompted as soon as the window is fully loaded. However, notice that this alert appears when the “window” is loaded. This means the user might get the alert before all elements completely load.

Method 4: Using the document’s onreadystatechange attribute,

DOM has this one attribute called the “onreadystatechange” which is fired up every time the state of the document is changed. This can be used to execute a function, but the only problem is that this variable or attribute can contain different states like loading, pending, processing, and complete. This is because this attribute is most used for XML or HTML requests.

A check must be induced to execute a function only when the document is fully loaded. Use the following lines inside the JavaScript file:

document.onreadystatechange = function () {
if (document.readyState == "complete") {
alert("Yahoo!");
}
};

In the above code snippet, a check has been placed to look for a specific state “complete” only then the user is being alerted. Fire up the HTML webpage and observe the output:

The user was alerted after the document’s ready state was “complete”.

Wrap up

There are quite a few ways to execute a JavaScript function as soon as the webpage has completely loaded. To demonstrate this, in this article, in every method, you have used an alert function to show an alert depicting that the webpage executed the JavaScript function after the complete loading of that webpage.