DOMContentLoaded vs load

Both signal that the page is ready, but they draw the line in different places.

DOMContentLoaded fires as soon as the HTML has been parsed and the DOM tree is complete. It does not wait for images, stylesheets, iframes or fonts. This is the earliest safe moment to query and manipulate elements.

load fires later, once every dependent resource has finished downloading — images, CSS, iframes, and so on. On a page with heavy media the gap between the two can be seconds.

document.addEventListener("DOMContentLoaded", () => {
  // DOM is ready; an <img> exists but may have no dimensions yet
  document.querySelector("#app").classList.add("ready");
});

window.addEventListener("load", () => {
  // Everything has downloaded; image sizes are now known
  measureLayout();
});

Which to use

Reach for DOMContentLoaded for almost all initialisation — attaching handlers, hydrating widgets, reading the DOM. Wait for load only when you genuinely need resources to be present: measuring an image's natural size, taking a screenshot of the finished page, or starting work you deliberately want to run after everything else.

Two practical notes: DOMContentLoaded is dispatched on document while load is usually listened for on window; and if your script is deferred or a module, the DOM is already parsed by the time it runs, so you often need neither event.