(Type a title for your page here)

How to Make JavaScript Execute After Page Load

It’s important to be sure that JavaScript doesn’t run before the page load. In this tutorial, you will get the right answer to your question of making the JavaScript run after the page load. Here are the two methods which can help you get the work done correctly.

The onload Method

The onload event occurs after the element has finished loading. This can be used with the body element to run a script after the webpage has thoroughly loaded:

html> html> head> title>Title of the document title> head> body onload="loadFunction()"> h1>Welcome to W3Docs h1> script> function loadFunction( ) < alert("Page is loaded"); > script> body> html>

The window.onload Method

The onload property with the window element is used to run a script after the webpage has thoroughly loaded. The onload property fires the function as soon as the webpage has been loaded:

html> html> head> title>Title of the document title> script src="https://code.jquery.com/jquery-3.5.0.min.js"> script> head> body> h1>Welcome to W3Docs h1> script> function loadFunction( ) < alert("Window is loaded"); > window.onload = loadFunction(); script> body> html>

Источник

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.

Источник

window.onload for executing as soon as page loads

Window.onload function we can use to perform some task as soon as the page finishes loading. This JavaScript function is used in different condition like displaying a print page or directing focus ( keeping the crusher blinking ) to user input field as soon as the page is loaded.

JavaScript Window onload to execute script as soon as page loads and difference between body onload

Using body tag

The other way to achieve the same result is by using onload inside body tag of the page. You can read this article on how to keep the onload event handler to set the focus on input tag once the page loads. �

Let us start some simple example of uses of window.onload function where we will display one Alert box once the page loads.
demo of window onload event →
Here is the script

Difference between window.onload function and body tag onload.

wondow.onload is executed when full page is loaded to the browser ( including all images, style , scripts ,CDN etc )
document.onload is executed when DOM is ready ( Not necessarily all connected script, images etc to be downloaded )

We can’t keep any code to access the property set or any other related objects of the elements present in body of the page by using window.onload function.

Say we want to select the text present inside a text box as soon as the page loads. This is not possible by using window.onload event but this is possible by using body onload command. The code below will generate error message.

      


plus2net.com 
Источник