DOM - Document Loaded - onload event

> (World Wide) Web - (W3|WWW) > The Document Object Model W3C API Interface (DOM)

1 - About

A document is in the loaded state once:

A document is in a ready state, all images are not finished downloading, including banner ads.

When the page is in this state the load event is emitted.


3 - Event

To ensure that the code runs after the browser finishes loading the document or an image, you may listen to the load event the following way.

3.1 - Element: onLoad attribute

  • An image
<img src="" 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");

3.2 - Document

3.2.1 - window.addEventListener

DOM - Event Listener function

window.addEventListener("load", function(event) {
    console.log("EventListener: All resources finished loading!");

3.2.2 - window.onload

window.onload = function() {
     console.log("window.onload: All resources finished loading!");