Web Browser - Load Event

Browser

About

The load event is fired by the browser.

Example

Image

With a onLoad content event handler, you can be updated when the image has finish loading

<img src="/_media/lenna.png" onLoad="console.log('Lenna has loaded')" width="200"/>

Page / Tab / Window

You can also check if the window (ie page) has finished loading.

window.addEventListener("load", () => { console.log("Event Listener: The page has been loaded") });
window.onload = () => { console.log("Idl: The page has been loaded") };

Other

document - DOMContentLoaded

This is not a event called on load event but as it's really similar…

DOMContentLoaded is called when the DOM is ready which can be prior to images and other external content is loaded.

document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
});

Doc





Discover More
Browser
Browser - DOMContentLoaded event (page load)

DomContentLoaded is a page load event that signals that the parser has finished the construction of the DOM. The resources at the left or touching the blue line are blocking the construction of the DOM....
Devtool Chrome Event Listener
DOM - Event

This section is the management of action in the Document object model (ie in the browser) An event allows for signaling that something has occurred, e.g., that an image has completed downloading. Event...
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)...
DOM - Document Loaded - onload event

The load event is an event that is fired / emitted on: an HTML element that fetch resources on the browser window when the page has finish loading. This event is a timing page load event To...
Html Script Async Vs Defer
HTML - Defer attribute

defer is an boolean attribute of script element that indicates to the user agent (browser) that it should execute the script: after the DOM has been created (the HTML document read entirely and has...
How to manipulate a Binary large object (BLOB) with Javascript?

The blob object is a data container for blob content This is the API to work with binary data in the browser and is widely supported Because any type of data is...
How to preload HTML resource (Javascript, StyleSheet)

This article shows you how to preload HTML resources to use them at a later time.
Browser Devtool Performance Page Load Timing
Page Load Event (Timing)

Page load timing are events that occurs during a page load. The snapshot below is the timing timeline in the devtool performance tab of a page load. where: FP - is the first paint - the paint of...
Page Loading Key Moment
Web - Timeline of a page load (Page Speed|Page Latency)

Page load is the latency performance metrics that cumulates: TCP latency (ie how fast, the network will receive the HTTP request and send back the HTTP response ) HTTP latency (ie how fast the web...



Share this page:
Follow us:
Task Runner