How to execute code before window.load and after DOM has been loaded?

Asked
Active3 hr before
Viewed126 times

7 Answers

execute
90%

Is there a way to ensure initialization to occur in the external Javascript before the window.onload event is triggered?,Please be sure to answer the question. Provide details and share your research!,Basically, you're looking for this:,But, in the external Javascript I want certain things to be done before the window.onload event is triggered. This is to allow customized components to be initialized first.

Basically, you're looking for this:

document.onreadystatechange = function(e) {
   if (document.readyState === 'complete') {
      //dom is ready, window.onload fires later
   }
};
window.onload = function(e) {
   //document.readyState will be complete, it's one of the requirements for the window.onload event to be fired
   //do stuff for when everything is loaded
};
load more v
88%

But there’s a pitfall. If we have a script after the style, then that script must wait until the stylesheet loads:,DOMContentLoaded – the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures <img> and stylesheets may not yet have loaded.,What happens if we set the DOMContentLoaded handler after the document is loaded?,The DOMContentLoaded event happens on the document object.

document.addEventListener("DOMContentLoaded", ready);
// not "document.onDOMContentLoaded = ..."
load more v
72%

Script tags have access to any element which appears before them in the HTML.,Scripts have access to all of the elements on the page which are defined in the HTML file before the script tag. This means, if you put your script at the bottom of the <body> you know every element on the page will be ready to access through the DOM:,There’s no technical difference between including your script in the <head> or <body>, all that matters is what is defined before the script tag in the HTML.,jQuery.ready / DOMContentLoaded occurs when all of the HTML is ready to interact with, but often before its been rendered to the screen.

Scripts have access to all of the elements on the page which are defined in the HTML file before the script tag. This means, if you put your script at the bottom of the <body> you know every element on the page will be ready to access through the DOM:

<html>

<body>
   <div id="my-awesome-el"></div>

   <script>
      document.querySelector('#my-awesome-el').innerHTML = new Date
   </script>
</body>

</html>
load more v
65%

In pure JavaScript, the standard method to detect a fully loaded page is using the onload event handler property. The load event indicates that all assets on the webpage have been loaded. This can be called with the window.onload in JavaScript.,  Although not recommended, you can also call a JavaScript method on page load using HTML <body> tag. The idea is to use the onload attribute in the body tag.,  The following code uses addEventListener() method to listen for the load event to detect a fully loaded page. This is equivalent to the above code.,  You can also watch for the load event on the window object using $(window).on("load", handler) method.

1. Using JavaScript

In pure JavaScript, the standard method to detect a fully loaded page is using the onload event handler property. The load event indicates that all assets on the webpage have been loaded. This can be called with the window.onload in JavaScript.

window.onload
load more v
75%

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets 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.,Related events: DOMContentLoaded, readystatechange, beforeunload, unload,EventseventafterprintanimationcancelanimationendanimationiterationbeforeprintbeforeunloadblurcopycutDOMContentLoadederrorfocushashchange languagechangeloadmessagemessageerrorofflineonlineorientationchangepagehidepageshowpastepopstaterejectionhandledstoragetransitioncancelunhandledrejectionunloadvrdisplayconnectvrdisplaydisconnectvrdisplaypresentchange,© 2005-2021 Mozilla and individual contributors. Content is available under these licenses.

window.addEventListener('load', (event) => {
   console.log('page is fully loaded');
});
load more v
40%

Hide or show elements in HTML using display property,How to clear form after submit in Javascript without using reset?,How to show Page Loading div until the page has finished loading?,Method 2: The window object represents the browser window. The onload property processes load events after the element has finished loading. This is used with the window element to execute a script after the webpage has completely loaded. The function that is required to be executed is assigned as the handler function to this property. It will run the function as soon as the webpage has been loaded.

Syntax:

<body onload="functionToBeExecuted">
load more v
22%

Description: Specify a function to execute when the DOM is fully loaded., handler Type: Function() A function to execute after the DOM is ready. , version added: 1.0.ready( handler ) handler Type: Function() A function to execute after the DOM is ready. ,Display a message when the DOM is loaded.

$(document).ready(function() { // Handler for .ready() called.});
load more v

Other "execute-undefined" queries related to "How to execute code before window.load and after DOM has been loaded?"