JavaScript Onload

Syntax of Onload in JavaScript

We can use this attribute in any HTML element.

When the load event occurs, the given function is called.

Return Value of Onload in JavaScript

In javascript, onload is used to associate a function or script, but because it is itself not a function, there is no concept of the return value.

Exceptions of Onload in JavaScript

There are no exceptions in the onload Javascript event attribute.

Example

In the below example, when Javascript will onload then a function loadFunction will be invoked.

Output:

Explanation:

• We have created a simple HTML which consists of a head tag for the script and a body tag for content.
• With the body tag, we have used the onload attribute and provided a function as a value that is defined inside the script tag of the head.
• This function will be executed when the page finishes loading.
• There is no complex content on the page that's why the load event is getting fired within a single second but this concept is suitable for complex web pages and real-life scenarios.

How Does Onload JavaScript Work?

The load event in HTML gets fired when the object finishes loading, which means all of the required resources have been loaded like images, external CSS, scripts, etc. Onload Javascript is used to execute some code when the page is completely loaded. Some practical use cases regarding the code to write in the script which is going to be executed with the load event are as follows:

• We can show some message to the user stating that your required webpage has been loaded entirely so that the user can start exploring the web page.
• We can communicate with the backend to further request some data when the page load is finished.
• We can present some data when the page load is completed, for example, if there is a commercial application and the user is reading a blog on that application, we can show a modal about the company's product related to that blog when the page, indeed the blog is been loaded completely.

The onload event attribute associates the given functionality to be executed when the load event gets fired, the load event is fired when the loading of web content finishes.

Apart from using onload, we can use the method addEventListener with the object to listen for the load event.

More Example

Sample Usecase of Onload in Javascript

We have some external scripts, external CSS, images, and videos here. So, with onload javascript, we want to perform some action as soon as all resources get loaded.

CSS File:

Script File:

HTML File:

Output:

Explanation:

• This example contains an image as well as a video.
• The onload event attribute is being used with the image element, hence as soon as the load event will be fired the given function will execute.
• The function provides the innerHTML content to the corresponding div, allowing it to display some sort of notification on the page.

Supported Browser

It is supported by almost every major browser for their updated version.