JavaScript Load Events

Load Events happen when the browser has finished loading an element.

The two most important load events:

• DOMContentLoaded (when HTML is ready)
• load (waits for pages, images, CSS, etc.)

Share

DOMContentLoaded

The DOMContentLoaded event fires when the browser has fully loaded the HTML and built the Document Object Model (DOM) tree, but has not necessarily finished loading external resources like images and stylesheets.

The DOMContentLoaded event is best for initializing the user interface, attaching event handlers, and performing actions that only require the DOM to be ready.

Example

// Add Event Listener to document

document.addEventListener("DOMContentLoaded", function () {

  document.getElementById("demo").innerHTML = "HTML is loaded!";

});

Window Load

The load event fires when the entire page has fully loaded, including all dependent resources such as images, stylesheets, and sub-frames.

The load event is best for actions that require all resources available, such as getting the dimensions of an image or checking the browser type.

Example

// Add Event Listener to window

window.addEventListener("load", function () {

  document.getElementById("demo").innerHTML = "Page is fully loaded!";

});

Other Load Events

The load event can also be used on other elements that fetch resources (not just pages):

Image Load

Example

const img = document.getElementById("myImg");

// Add Event Listener to img

img.addEventListener("load", function () {

  document.getElementById("demo").innerHTML = "Image loaded!";

});