Web Browser - Load Event
About
The load event is fired by the browser.
- at the Window when the document has finished loading
- at an fetch element that fetch a resource (e.g. img, embed) when its resource has finished loading
- as an event that triggers file asynchronous operation. Example: FileReader to read a blob
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.
- With an event listener that fires on the “load” event
window.addEventListener("load", () => { console.log("Event Listener: The page has been loaded") });
- With a onLoad IDL event handler, you also check if the window (ie page) has finished loading.
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');
});