load vs DOMContentLoaded event

JavaScript

The short answer

DOMContentLoaded fires when the HTML has been fully parsed and the DOM tree is built, but external resources like images, stylesheets, and iframes may still be loading. load fires when everything is fully loaded — the DOM, images, stylesheets, scripts, and all other resources. DOMContentLoaded fires first and is usually the one you want.

DOMContentLoaded

This event fires as soon as the HTML document is completely parsed and all deferred scripts have run. It does not wait for images, stylesheets, or other external resources.

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM is ready');
  // Safe to query DOM elements here
  const button = document.querySelector('#my-button');
  button.addEventListener('click', handleClick);
});

This is the right event to use when you need to:

  • Add event listeners to DOM elements
  • Manipulate the DOM
  • Initialize your JavaScript application

load

The load event fires when the entire page is fully loaded, including all images, stylesheets, fonts, and other resources.

window.addEventListener('load', () => {
  console.log('Everything is fully loaded');
  // Safe to read image dimensions, computed styles, etc.
  const img = document.querySelector('img');
  console.log(img.naturalWidth, img.naturalHeight);
});

This is the right event to use when you need to:

  • Read image dimensions
  • Access computed styles that depend on external stylesheets
  • Work with resources that must be fully loaded

The timeline

HTML parsing starts
    ↓
HTML parsing finishes, DOM is built
    ↓
DOMContentLoaded fires  ← DOM ready, resources still loading
    ↓
Images, stylesheets, fonts finish loading
    ↓
load fires  ← Everything ready

Practical example

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM ready');
});
window.addEventListener('load', () => {
  console.log('All resources loaded');
});
// If the page has a large image:
// Output:
// "DOM ready"          ← fires quickly
// (image still loading...)
// "All resources loaded" ← fires after image loads

The gap between the two events depends on how many external resources the page has. On a page with many large images, load could fire seconds after DOMContentLoaded.

Modern alternatives

In modern applications, you often do not need either event:

  • If your <script> tag is at the bottom of the <body>, the DOM is already available
  • If you use defer on your script, it runs after the DOM is parsed (same timing as DOMContentLoaded)
  • If you use a framework like React, the framework handles this for you
<!-- defer makes the script run after DOM is parsed -->
<script src="app.js" defer></script>

Interview Tip

The key difference to explain is: DOMContentLoaded waits for HTML parsing only, load waits for everything. For most cases, DOMContentLoaded is what you want because you usually just need the DOM to be ready. Mentioning defer as a modern alternative shows practical knowledge.

Why interviewers ask this

This tests your understanding of how browsers load and render web pages. Interviewers want to see if you know the difference between the two events, when each fires, and which one to use for different scenarios. It also leads into discussions about page performance and script loading strategies.

Table of Contents