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
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'); };
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 thewindow.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 thewindow.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 anwindow.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.