Чим DOMContentLoaded відрізняється від load?

JavaScriptMiddle~1 хв читання

Коротко:

Подія	Коли спрацьовує
`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

HTML завантажується і парситься
<script> виконується
DOMContentLoaded (DOM вже готовий до роботи)
Завантаження стилів, зображень, iframe тощо
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 -> "Все завантажено - можна показувати сторінку повністю"

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.