Ответ
DOMContentLoaded и load — это события жизненного цикла загрузки страницы, но они срабатывают в разные моменты:
-
DOMContentLoaded
Срабатывает, когда браузер полностью загрузил и разобрал HTML-документ, построил DOM-дерево, но ещё не загрузил внешние ресурсы (картинки, стили, скрипты и т.д.).
Подходит для инициализации скриптов, которым не нужно ждать загрузки всех ресурсов. -
Load
Срабатывает, когда загружены все ресурсы страницы (изображения, стили, скрипты и т.д.).
Используется, когда нужно работать с размерами изображений или другими зависимостями от полной загрузки.
// Пример использования
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM готов, но картинки ещё нет');
});
window.addEventListener('load', () => {
console.log('Вся страница загружена');
});Ответ 18+ 🔞
Давай разберёмся с этими двумя событиями, а то, блядь, у многих мозг вскипает, когда пытаются понять разницу. Представь, что страница — это квартира, которую ты заселяешь.
DOMContentLoaded — это когда ты притащил всю мебель из Икеи, разложил коробки по комнатам, но ещё нихуя не собрал. Картинки в рамочках валяются, диван в плёнке, кровать — набор палок. Но план, где что будет, уже ясен! Браузер в этот момент уже прочитал весь HTML, построил из него дерево (DOM), но стили, картинки и прочую хуйню ещё качает.
Load — это когда ты наконец-то, ебать мои старые костыли, всё собрал, повесил полки, вкрутил лампочки и поставил пиво в холодильник. Всё, квартира готова к просмотру. Страница загрузила абсолютно всё: и тяжёлые гифки твоей тёщи, и скрипты-паразиты с рекламой, и шрифты размером с ядро планеты.
Зачем это нужно? А вот зачем:
- DOMContentLoaded юзаешь, когда тебе надо по-быстрому что-то сделать с элементами на странице — навесить обработчики, показать попап, начать анимацию. Ждать картинки 10 мегабайт — нахуй не надо.
- Load — когда тебе критично знать точные размеры всего, что есть. Например, выровнять слайдер по самой большой, блядь, картинке, которая подгрузилась последней. Или запустить какой-нибудь тяжёлый скрипт, которому нужна вся страница целиком.
Вот, смотри, как это в коде выглядит, тут всё просто:
// Сработает, когда DOM готов, но картинки ещё, возможно, грузятся
document.addEventListener('DOMContentLoaded', () => {
console.log('Документ собран. Можно искать элементы и тыкать в них, но размеры картинок — хуй знает.');
});
// Сработает, когда ВСЁ, блядь, кончилось
window.addEventListener('load', () => {
console.log('Всё загружено. Теперь можно точно знать, что эта ебучая рекламная баннерша уже отрисовалась и заняла полэкрана.');
});Короче, запомни: DOMContentLoaded — «скелет готов», load — «труп полностью одет и накрашен». Выбирай в зависимости от задачи, а то будешь как Герасим из рассказа — метаться и мумукать от непоняток.