How does DOMContentLoaded differ from load?

JavaScriptMiddle~1 min read

In short:

Event	When it fires
`DOMContentLoaded`	When the HTML is fully loaded and parsed, but resources (images, styles, videos) may still be loading
`load`	When everything is fully loaded - including images, styles, fonts, iframes, etc.

1. An example of the difference

javascript

document.addEventListener('DOMContentLoaded', () => {
  console.log('HTML loaded and DOM is ready');
});

window.addEventListener('load', () => {
  console.log('Page fully loaded');
});

If you have a page with a heavy image:

javascript

<img src="big-photo.jpg">

You will see in the console:

javascript

HTML loaded and DOM is ready
Page fully loaded

So DOMContentLoaded fires earlier, before the image finishes loading.

2. Timing (loading stages)

javascript

HTML is loaded and parsed
<script> runs
DOMContentLoaded (the DOM is now ready to work with)
Styles, images, iframes, etc. load
load (everything is fully loaded)

3. An example of the practical difference

Using `DOMContentLoaded`

When you need to work with elements on the page (attach handlers, modify the DOM):

javascript

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.querySelector('#button');
  btn.addEventListener('click', () => alert('The button works!'));
});

Suitable for UI initialization - you don't need to wait for images to load.

Using `load`

When it matters that everything (including images) is loaded, for example when measuring element sizes or for animations with background images:

javascript

window.addEventListener('load', () => {
  console.log('All page resources are loaded!');
});

4. Another example: the speed difference

javascript

document.addEventListener('DOMContentLoaded', () => console.log('DOM ready'));
window.addEventListener('load', () => console.log('Everything loaded'));

If the page contains heavy images (10 MB+):

javascript

DOM ready → after 0.5 sec
Everything loaded → after 3.2 sec

5. Resources that are not waited for

DOMContentLoaded does not wait for:

<img> to load,
<iframe> to load,
external <style> and <script defer>.

But window.onload waits for everything.

Summary

Event	When it fires	What is ready	When to use it
`DOMContentLoaded`	After the HTML is parsed	The DOM tree	For JS initialization, attaching events
`load`	After all resources load	Everything (DOM + images + CSS + fonts)	For analytics, animations, preloaders

Simple way to remember it:

DOMContentLoaded -> "The HTML is ready, you can work with the DOM"

load -> "Everything is loaded, you can show the full page"

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.