Как понять что загрузились все ресурсы?

Загрузку всех ресурсов определяют по событию `load` у `window` — оно срабатывает, когда загружены все ресурсы (изображения, стили, скрипты). `DOMContentLoaded` — только DOM, без ресурсов.

window.load — все ресурсы загружены

window.addEventListener('load', () => {
  console.log('Все ресурсы загружены');
});

Срабатывает после загрузки:

• HTML (DOM).
• Изображений.
• Стилей, шрифтов.
• Скриптов, iframe.

DOMContentLoaded — только DOM

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM готов (без картинок/стилей)');
});

Раньше load — когда построен DOM, но ресурсы могут ещё грузиться.

Различие

• DOMContentLoaded — DOM готов (можно работать с элементами).
• load — всё загружено (включая картинки).

Парсинг HTML → DOMContentLoaded → загрузка ресурсов → load

document.readyState

document.readyState; // 'loading' | 'interactive' | 'complete'
// 'complete' — всё загружено (эквивалент load)

Отслеживание конкретных ресурсов

img.addEventListener('load', () => {}); // загрузка изображения
img.addEventListener('error', () => {}); // ошибка загрузки

Practical

• Работа с DOM → DOMContentLoaded (раньше, быстрее).
• Нужны размеры изображений, всё готово → load.

Коротко для собеседования

Загрузку всех ресурсов определяют по событию window.load (срабатывает после загрузки HTML, изображений, стилей, скриптов). DOMContentLoaded — только DOM (раньше, без ресурсов). Порядок: парсинг → DOMContentLoaded → ресурсы → load. document.readyState === 'complete' — эквивалент load. Для конкретного ресурса — событие load на нём.