Suggest an edit

Improve this article

Refine the answer for “How does DOMContentLoaded differ from load?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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
1. HTML is loaded and parsed
2. <script> runs
3. DOMContentLoaded (the DOM is now ready to work with)
4. Styles, images, iframes, etc. load
5. 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"

Markdown · drag & drop images · ⌘B / ⌘I shortcuts425 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.