Onload in HTML

Question

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Table of Contents Show

Example usage
Points to be aware of
The window’s load event
The image’s load event
The script’s load event
What is onload in HTML?
Which HTML elements support onload?
Can we use onload in div?
How to call a JavaScript function onload of HTML?

Attribute ofHTML Body Tag: Master The Most Important HTML Element NowWhat does <body onLoad=""> do?Fires a script when the page has finished loading.

The onLoad attribute is an event handler that instructs the browser to run a script when the visitor loads the page. This is commonly used to forward the visitor to another page, but can be used to trigger pop-up boxes, or execute a script based on the user’s browser version.

Example usage

<body onLoad="script">

Points to be aware of

body event handlers act on the browser window, and the script will only be executed once the page is completely finished loading. Because of this, onLoad can’t be used to change the size or properties of the browser window. The opposite command, onUnload, often yields more reliable results than onLoad.

Claire Broadley

Claire is seasoned technical writer, editor, and HTML enthusiast. She writes for HTML.com and runs a content agency, Red Robot Media.

Summary: in this tutorial, you will learn how to handle the load event that fires on the document, image, and script elements in JavaScript.

The window’s load event

For the window object, the load event is fired when the whole webpage (HTML) has loaded fully, including all dependent resources, including JavaScript files, CSS files, and images.

To handle the load event, you register an event listener using the

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

0 method:

window.addEventListener('load', (event) => {
    console.log('The page has fully loaded');
});
Code language: JavaScript (javascript)

Or use the

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

1 property of the

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

2 object:

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

If you maintain a legacy system, you may find that the load event handler is registered in of the body element of the HTML document, like this:

<!DOCTYPE html>
<html>
<head>
    <title>JS load Event Demo</title>
</head>
<body onload="console.log('Loaded!')">
</body>
</html>
Code language: HTML, XML (xml)

It’s a good practice to use the

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

0 method to assign the

window.onload = (event) => {
    console.log('The page has fully loaded');
};



Code language: JavaScript (javascript)

1 event handler whenever possible.

The image’s load event

The load event also fires on images. To handle the load event on images, you use the

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

0 method of the image elements.

The following example uses the load event handler to determine if an image, which exists in the DOM tree, has been completely loaded:

<!DOCTYPE html>
<html>
<head>
    <title>Image load Event Demo</title>
</head>
<body>
    <img id="logo">
    <script>
        let logo = document.querySelector('#logo');

        logo.addEventListener('load', (event) => {
            console.log('Logo has been loaded!');
        });

        logo.src = "logo.png";
    </script>
</body>
</html>
Code language: HTML, XML (xml)

You can assign an

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

1 event handler directly using the

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

1 attribute of the

<!DOCTYPE html>
<html>
<head>
    <title>JS load Event Demo</title>
</head>
<body onload="console.log('Loaded!')">
</body>
</html>
Code language: HTML, XML (xml)

2 element, like this:

<img id="logo" 
     src="logo.png" 
     onload="console.log('Logo loaded!')">
Code language: HTML, XML (xml)

If you create an image element dynamically, you can assign an

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

1 event handler before setting the

<!DOCTYPE html>
<html>
<head>
    <title>JS load Event Demo</title>
</head>
<body onload="console.log('Loaded!')">
</body>
</html>
Code language: HTML, XML (xml)

4 property as follows:

window.addEventListener('load' () => {
    let logo = document.createElement('img');
    // assign and onload event handler
    logo.addEventListener('load', (event) => {
        console.log('The logo has been loaded');
    });
    // add logo to the document
    document.body.appendChild(logo);
    logo.src = 'logo.png';
});
Code language: JavaScript (javascript)

How it works:

First, create an image element after the document has been fully loaded by placing the code inside the event handler of the window’s load event.

Second, assign the

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

1 event handler to the image.

Third, add the image to the document.

Finally, assign an image URL to the

<!DOCTYPE html>
<html>
<head>
    <title>JS load Event Demo</title>
</head>
<body onload="console.log('Loaded!')">
</body>
</html>
Code language: HTML, XML (xml)

4 attribute. The image will be downloaded to the element as soon as the

<!DOCTYPE html>
<html>
<head>
    <title>JS load Event Demo</title>
</head>
<body onload="console.log('Loaded!')">
</body>
</html>



Code language: HTML, XML (xml)

4 property is set.

The script’s load event

The

<!DOCTYPE html>
<html>
<head>
    <title>JS load Event Demo</title>
</head>
<body onload="console.log('Loaded!')">
</body>
</html>
Code language: HTML, XML (xml)

8 element also supports the load event slightly different from the standard ways. The script’s load event allows you to check if a JavaScript file has been completely loaded.

Unlike images, the web browser starts downloading JavaScript files only after the

<!DOCTYPE html>
<html>
<head>
    <title>JS load Event Demo</title>
</head>
<body onload="console.log('Loaded!')">
</body>
</html>
Code language: HTML, XML (xml)

4 property has been assigned and the

<!DOCTYPE html>
<html>
<head>
    <title>JS load Event Demo</title>
</head>
<body onload="console.log('Loaded!')">
</body>
</html>
Code language: HTML, XML (xml)

8 element has been added to the document.

The following code loads the

<!DOCTYPE html>
<html>
<head>
    <title>Image load Event Demo</title>
</head>
<body>
    <img id="logo">
    <script>
        let logo = document.querySelector('#logo');

        logo.addEventListener('load', (event) => {
            console.log('Logo has been loaded!');
        });

        logo.src = "logo.png";
    </script>
</body>
</html>
Code language: HTML, XML (xml)

3 file after the page has been completely loaded. It assigns an

window.onload = (event) => {
    console.log('The page has fully loaded');
};
Code language: JavaScript (javascript)

1 event handler to check if the

<!DOCTYPE html>
<html>
<head>
    <title>Image load Event Demo</title>
</head>
<body>
    <img id="logo">
    <script>
        let logo = document.querySelector('#logo');

        logo.addEventListener('load', (event) => {
            console.log('Logo has been loaded!');
        });

        logo.src = "logo.png";
    </script>
</body>
</html>
Code language: HTML, XML (xml)

3 has been fully loaded.

What is onload in HTML?

The onload attribute fires when an object has been loaded. onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well (see "Supported HTML tags" below).

Which HTML elements support onload?

onload is an event specific to the body , frame , iframe , img , link , and script elements.

Can we use onload in div?

The onload event can only be used on the document(body) itself, frames, images, and scripts. In other words, it can be attached to only body and/or each external resource. The div is not an external resource and it's loaded as part of the body, so the onload event doesn't apply there.

How to call a JavaScript function onload of HTML?

The first approach for calling a function on the page load is the use an onload event inside the HTML <body> tag. As you know, the HTML body contains the entire content of the web page, and when all HTML body loads on the web browser, it will call the function from the JavaScript.