DOM - Load event (onload, load listener)

About

The load event 1) is an event that is fired / emitted on:

Possible duplicate of Web Browser - Load Event

Event Handling

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 a load event listener
  • with the onLoad attribute

load Event Listener

With the load event listener

window.addEventListener

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)");
});

Element.addEventListener

The below example uses an image but you can use it on any HTML element that fetches resources such as script, link, …)

Example:

  • An image
<img src="https://datacadamia.com/_media/lenna.png" alt="Lenna" width="150">
  • The script that we want to run after the image has loaded
document.querySelector("img").addEventListener("load", () => console.log("Lenna has loaded") );

onLoad attribute

With the onLoad event content handler attributes.

HTML element onLoad

The below example uses an image but you can use it on any HTML element that fetches resources such as script, link, …)

  • An image
<img src="https://datacadamia.com/_media/lenna.png" alt="Lenna" width="150" onload="lennaHasLoaded(event)">
  • The script that we want to run after the image has loaded
function lennaHasLoaded(){
 console.log("Lenna has loaded");
}

window.onload

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.

  • First function
window.onload = function() {
     console.log("window.onload: All resources finished loading! First function that will not be executed");
};
  • Second execution
window.onload = function() {
     console.log("window.onload: All resources finished loading! Second and last function that have been set.");
};

Other

Jquery

On load Demo:

$(window).on("load", function() {
   console.log("The page has fully loaded");
});

Old browser

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;





Discover More
Browser
Browser - Page loading

Page loading is a status of the timeline of a page load. When a page is loaded, it means that the browser: has received a HTTP response from an request and has parsed the content (during the parse...
Chrome Devtool Xhr Fetch Request
Browser - XMLHttpRequest (XHR) API

The XMLHttpRequest is a web api function that performs an resource fetch with an Aysnchronous HTTP request XMLHttpRequestAPIAJAX programmingfetch API The status of an XHR request. Value Constant...
Devtool Chrome Event Listener
DOM - Event Type (name)

An event is categorize by its type which is a property of the event object The type of an event is also known as the name of the event (Ref)...
Devtool Chrome Event Listener
Event - Missed Event

Parsing of HTML files happens synchronously and incrementally, meaning that the parser can pause at any point to let scripts run. It does mean that authors need to be careful to avoid hooking event handlers...
HTML - Escape / Sanitizer

A sanitizer is a program that will: not accept all HTML elements and or transform them as text (escape) This is to avoid script injection and should be used on the server side (ie not client) to...
HTML - Image (Img tag)

img is an fetch element that represents an image. An image in HTML can also be represented with a picture element that defines logically the same image but may have different physical image (different...
HTML Form - 1001 ways to submit a Form and handle the corresponding Event

This page talks and shows all the ways on how to submit a form and handle the submit event in javascript. How a form can be submitted ? HTML One way is to include a input element of type submit that...
Scratchpad Execute
Javascript - (Firefox) Scratchpad

Within the scratchpad (shift+f4), you can write, run, and examine the results of code that interacts with the web page. The selected...
Javascript - Module Loader (Script Loader)

A loader searches and loads module and script into the javascript engine (environment). From the main script, they will: create a dependency graph from the require and import statement find them...
Chrome Dev Tool Source Debugger Scope
Javascript - This

this is a variable that has a reference value to the scope (namespace) this printThisobjthisobj Generally, this is the local scope but it may be changed. You can set this : in the call of a function...



Share this page:
Follow us:
Task Runner