Onjsdev

Share


DOM Content Loaded vs Load Events


By onjsdev

Feb 23rd, 2024

During the loading process of a website, events are triggered based on the rendering status of elements on the page. Two such events are DOMContentLoaded and Load. You may see these events similar, however they serve different purposes. Let's see the differences between them.

DOMContentLoaded

The DOMContentLoaded event is fired when the initial HTML document has been fully parsed and the DOM has been constructed. This means that any HTML tags or content included in the initial HTML document are available to be manipulated by JavaScript code.

document.addEventListener("DOMContentLoaded", function() {
  // DOM has been fully parsed and constructed, and is ready to be manipulated
  const header = document.querySelector("header");
  header.textContent = "Hello, World!";
});

In the code snippet above, by using the DOMContentLoaded event in this way, you can ensure that the DOM is fully constructed and ready to be manipulated with javascript.

Use Cases

  • Web application initialization:

If you're building a web application that relies heavily on JavaScript code, you can use DOMContentLoaded to trigger the initialization of your application.

  • Analytics tracking:

If you're using an analytics tool to track user behavior on your website, you can use DOMContentLoaded to track when the page has fully loaded and is ready for user interaction. This can help to ensure that your analytics data is accurate and complete.

  • Third-party script integration:

If you're using third-party scripts on your website, such as for advertising or social media integration, you can use DOMContentLoaded to ensure that the scripts are fully loaded and ready to go before they start interacting with the page

Load

The load event, on the other hand, is fired when all resources on the page have been loaded, including images, stylesheets, scripts, and any other external resources. This means that the DOM is fully constructed, and all resources are ready to be manipulated by JavaScript code.

window.addEventListener("load", function() {
  // All resources have been fully loaded, and are ready to be manipulated
  const image = document.querySelector("img");
  image.setAttribute("src", "https://example.com/image.jpg");
});

In the code snippet above, by using the load event in this way, we're ensuring that all necessary resources, including images, have been fully loaded and are ready to be manipulated before we attempt to change the src attribute of the image.

Use Cases

  • Image and video manipulation:

If you're working with images or videos in your web development project, you can use load to make sure that the media is fully loaded and ready to be manipulated before attempting to apply any JavaScript effects or transformations.

  • Google Maps integration:

If you're using the Google Maps API on your website, you can use the load event to ensure that the necessary libraries and resources have been fully loaded before displaying the map to the user

Conclusion

In summary, the DOMContentLoaded and load events are both important events that are triggered during the page load process. You can use them if you want to execute some commands in the website's inital loading process.

Thank you for reading.