DOM - Document Loaded - onload event

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

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

3.2.3 - Jquery

On load Demo:


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


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


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap