The load event 1) is an event that is fired / emitted on:
Possible duplicate of Web Browser - Load Event
To ensure that the code runs after the browser finishes loading the page or any element such as an image or script, you may listen to the load event the following way:
With the load event listener
When the window has finished loading (ie document, image, script, …). ie when the page load has finished
This state is also known as the loaded state ie
Example:
parent.window.addEventListener("load", function(event) {
console.log("EventListener: The page is loaded (ie window is loaded)");
});
The below example uses an image but you can use it on any HTML element that fetches resources such as script, link, …)
Example:
<img src="https://datacadamia.com/_media/lenna.png" alt="Lenna" width="150">
document.querySelector("img").addEventListener("load", () => console.log("Lenna has loaded") );
With the onLoad event content handler attributes.
The below example uses an image but you can use it on any HTML element that fetches resources such as script, link, …)
<img src="https://datacadamia.com/_media/lenna.png" alt="Lenna" width="150" onload="lennaHasLoaded(event)">
function lennaHasLoaded(){
console.log("Lenna has loaded");
}
The onload attribute supports only one function that will be executed after the load event.
You should not use it because any script can overwrite it.
Example: the first function sets on the onload window property below will not be executed.
window.onload = function() {
console.log("window.onload: All resources finished loading! First function that will not be executed");
};
window.onload = function() {
console.log("window.onload: All resources finished loading! Second and last function that have been set.");
};
On load Demo:
$(window).on("load", function() {
console.log("The page has fully loaded");
});
This code is for informational purpose only. It uses the onreadystatechange of the XHR request
script.onreadystatechange = function () {
if (this.readyState === 'loaded') callback();
}
script.onload = callback;