JavaScript onload
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 addEventListener() method:
window.addEventListener('load', (event) => < console.log('The page has fully loaded'); >);Code language: JavaScript (javascript)Or use the onload property of the window 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:
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 addEventListener() method to assign the onload 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 addEventListener() 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:
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 onload event handler directly using the onload attribute of the 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 onload event handler before setting the src 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)- 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 onload event handler to the image.
- Third, add the image to the document.
- Finally, assign an image URL to the src attribute. The image will be downloaded to the element as soon as the src property is set.
The script’s load event
The 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 src property has been assigned and the element has been added to the document.
The following code loads the app.js file after the page has been completely loaded. It assigns an onload event handler to check if the app.js has been fully loaded.
window.addEventListener('load', checkJSLoaded) function checkJSLoaded( ) < // create the script element let script = document.createElement('script'); // assign an onload event handler script.addEventListener('load', (event) => < console.log('app.js file has been loaded'); >); // load the script file script.src = 'app.js'; document.body.appendChild(script); >Code language: JavaScript (javascript)Summary
- The load event occurs when the document has been completely loaded, including dependent resources like JavaScript files, CSS files, and images.
- The
and elements also support the load event.
- Use the addEventListener() method to register an onload event handler.
Window: load event
The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images. This is in contrast to DOMContentLoaded , which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.
This event is not cancelable and does not bubble.
Note: All events named load will not propagate to Window , even with bubbles initialized to true . To catch load events on the window , that load event must be dispatched directly to the window .
Note: The load event that is dispatched when the main document has loaded is dispatched on the window , but has two mutated properties: target is document , and path is undefined . These two properties are mutated due to legacy conformance.
Syntax
Use the event name in methods like addEventListener() , or set an event handler property.
addEventListener("load", (event) => >); onload = (event) => >;
Event type
Examples
Log a message when the page is fully loaded:
.addEventListener("load", (event) => console.log("page is fully loaded"); >);
The same, but using the onload event handler property:
.onload = (event) => console.log("page is fully loaded"); >;
Live example
HTML
div class="controls"> button id="reload" type="button">Reloadbutton> div> div class="event-log"> label for="eventLog">Event log:label> textarea readonly class="event-log-contents" rows="8" cols="30" id="eventLog">textarea> div>
body display: grid; grid-template-areas: "control log"; > .controls grid-area: control; display: flex; align-items: center; justify-content: center; > .event-log grid-area: log; > .event-log-contents resize: none; > label, button display: block; > #reload height: 2rem; > JavaScript
const log = document.querySelector(".event-log-contents"); const reload = document.querySelector("#reload"); reload.addEventListener("click", () => log.textContent = ""; setTimeout(() => window.location.reload(true); >, 200); >); window.addEventListener("load", (event) => log.textContent += "load\n"; >); document.addEventListener("readystatechange", (event) => log.textContent += `readystate: $document.readyState>\n`; >); document.addEventListener("DOMContentLoaded", (event) => log.textContent += `DOMContentLoaded\n`; >);
Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Apr 8, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
How do I detect when a web page is loaded?
I want to write an application that detects when a page is loaded in the browser, then I should be able to insert content on top of the loaded web page? Anybody with an idea on how to do that? Please note that I should be able to do this in any browser (Firefox/IE). What language should I use to help me do this? How do I detect this from an external application? How should I integrate this with the browser?
9 Answers 9
You would use javascript to do this. If you don’t know how to use javascript, I would recommend reading through some tutorials first.
After you have a basic understanding of javascript, you can detect when a page has loaded by using the window.onload event.
Edit: If you want to add more than one onload function, and not use a javascript library, you can wrap your own onload hanlder.
window.whenloaded = function(fn) < if (window.onload) < var old = window.onload; window.onload = function() < old(); fn(); >> else < window.onload = fn; >> You should definitely use use EventListener s instead of overriding the window.onload function. Overriding this function will disable any other function from attaching to it. I would suggest @Luca Matteis ‘s answer.
// Everything but IE window.addEventListener("load", function() < // loaded >, false); // IE window.attachEvent("onload", function() < // loaded >); This way you can add as many Listeners as you want, you can also detach them! removeEventListener and detachEvent .
Better than onload is to use a function of an existing framework, because onload does sometimes respond after all the resources (images and so on) are loaded and not only the page.
+1 , this is 10x better than the onload event for the precise reasons you mention. Too many people use onload and it might not fire for seconds after the page is displayed to the user.
This also has the advantage of playing nice with existing event handlers. window.onload on the other hand will over-write them.
Not that you actually require a library for this. Dean Edwards has a good discussion on this: dean.edwards.name/weblog/2005/09/busted (and an update)
Not only does it need the library but $ must be loaded first, which if implemented correctly would be at the end of the page. Sometime it may be necessary to detect that the page has loaded so that other jQuery functions can run.
Your query can be solved easily by this helpful link: OnLoad W3School
If you want loading status:
You can do that using simple Javascript
if (document.readyState == "complete")
Return Value: A String, representing the status of the current document.
- uninitialized — Has not started loading yet
- loading — Is loading
- loaded — Has been loaded
- interactive — Has loaded enough and the user can interact with it
- complete — Fully loaded
Hope this clears your thoughts.
I know there are a lot of answers on this topic, but I believe the best solution is a mix of more than one, in case you don’t know when your script is going to run (in my case a client could paste the script before the window load or after that event).
if (document.readyState == "complete") < alert("Your page is loaded"); >else< window.addEventListener("load", function() < alert("Your page is loaded"); >, false); > You could create a function with this behavior and attach a callback function that does whatever you need.
Javascript’s OnLoad event for the body does what you want.
In Javascript, you have the load event.
Javascript using the load event, will wait for the page to be loaded before executing.
If you’re using the jQuery framework’s document ready function the code will load as soon as the DOM is loaded and before the page contents are loaded:
/** * The addEventListener() method attaches an event handler to the specified element. * @param event Type of the event (like 'load', 'click' or 'onchange' . ) * @param obj When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event * @param fn Specifies the function to run when the event occurs. */ function addListener(event, obj, fn) < if (obj.addEventListener) < obj.addEventListener(event, fn, false); // modern browsers >else < obj.attachEvent("on"+event, fn); // older versions of IE >> // Thge event emitter will be emitted when page is loaded addListener('load', window, function(event) < alert("Your page is loaded"); >); Of course, you can add more different addEventListener , for example click , onChange etc.
Linked
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.