Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Чим DOMContentLoaded відрізняється від load?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Коротко:

| Подія | Коли спрацьовує |
| --- | --- |
| `DOMContentLoaded` | Коли **HTML повністю завантажений і розібраний**, але **ресурси (картинки, стилі, відео)** можуть ще завантажуватись |
| `load` | Коли **все завантажено повністю** - включно з картинками, стилями, шрифтами, iframe тощо |

## 1. Приклад різниці

```javascript
document.addEventListener('DOMContentLoaded', () => {
  console.log('HTML завантажено і DOM готовий');
});

window.addEventListener('load', () => {
  console.log('Сторінка повністю завантажена');
});
```

Якщо у тебе є сторінка з важким зображенням:

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

Ти побачиш у консолі:

```javascript
HTML завантажено і DOM готовий
Сторінка повністю завантажена
```

Тобто `DOMContentLoaded` спрацює раніше,
ще **до того, як картинка довантажиться**.

## 2. Таймінг (етапи завантаження)

```javascript
1. HTML завантажується і парситься
2. <script> виконується
3. DOMContentLoaded (DOM вже готовий до роботи)
4. Завантаження стилів, зображень, iframe тощо
5. load (все повністю завантажено)
```

## 3. Приклад практичної різниці

### Використання `DOMContentLoaded`

Коли тобі потрібно працювати з елементами на сторінці (навішувати обробники, змінювати DOM):

```javascript
document.addEventListener('DOMContentLoaded', () => {
  const btn = document.querySelector('#button');
  btn.addEventListener('click', () => alert('Кнопка працює!'));
});
```

Підходить для ініціалізації UI - не потрібно чекати завантаження зображень.

### Використання `load`

Коли важливо, щоб **все (включно із зображеннями)** було завантажено,
наприклад, при вимірюванні розмірів елементів або анімаціях з фоновими зображеннями:

```javascript
window.addEventListener('load', () => {
  console.log('Усі ресурси сторінки завантажено!');
});
```

## 4. Ще приклад: різниця у швидкості

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

Якщо сторінка містить важкі зображення (10 МБ+):

```javascript
DOM ready → через 0.5 сек
Everything loaded → через 3.2 сек
```

## 5. Ресурси, що не враховуються

`DOMContentLoaded` **не чекає**:

- завантаження `<img>`,
- завантаження `<iframe>`,
- зовнішніх `<style>` і `<script defer>`.

А от `window.onload` чекає **все**.

## Підсумок

| Подія | Коли спрацьовує | Що готово | Коли використовувати |
| --- | --- | --- | --- |
| `DOMContentLoaded` | Після розбору HTML | DOM-дерево | Для ініціалізації JS, навішування подій |
| `load` | Після завантаження всіх ресурсів | Все (DOM + зображення + CSS + шрифти) | Для аналітики, анімацій, preloader'ів |

> **Запам'ятай просто:**
>
> - `DOMContentLoaded` -> "HTML готовий - можна працювати з DOM"
> - `load` -> "Все завантажено - можна показувати сторінку повністю"

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати371 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.