PrepBro
← Назад к вопросам

Что такое событие onload?

1.0 Junior🔥 131 комментариев
#Браузер и сетевые технологии

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Событие onload

Событие onload - это момент, когда браузер полностью загрузит все ресурсы страницы: HTML, CSS, JavaScript, изображения и другие файлы. После этого события страница считается полностью готовой к работе.

Когда срабатывает onload?

Событие onload срабатывает:

  • Когда загружена вся HTML-разметка
  • Когда загружены все стили и скрипты
  • Когда загружены все изображения и мультимедиа
  • Когда выполнены все синхронные скрипты

Это отличается от события DOMContentLoaded, которое срабатывает раньше - сразу после парсинга HTML и загрузки скриптов, но еще до загрузки всех изображений.

Способы использования

Через атрибут на элементе body:

<body onload="initApp()">
  <!-- контент -->
</body>

Через прямое назначение обработчика:

window.onload = function() {
  console.log("Страница полностью загружена");
  // инициализация приложения
};

Через addEventListener (рекомендуемый способ):

window.addEventListener("load", function() {
  console.log("Все ресурсы загружены");
  // инициализация приложения
});

Практические примеры

Инициализация при полной загрузке:

window.addEventListener("load", function() {
  const images = document.querySelectorAll("img");
  images.forEach(img => {
    console.log(`Изображение ${img.src} загружено`);
  });
});

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

const preloader = document.getElementById("preloader");
window.addEventListener("load", function() {
  preloader.style.display = "none";
});

Проверка размеров изображений:

window.addEventListener("load", function() {
  const img = document.querySelector(".hero-image");
  console.log(`Размеры: ${img.naturalWidth} x ${img.naturalHeight}`);
});

DOMContentLoaded vs onload

  • DOMContentLoaded: срабатывает раньше, когда DOM готов, но изображения еще могут загружаться
  • onload: срабатывает позже, когда ВСЕ ресурсы загружены
document.addEventListener("DOMContentLoaded", function() {
  console.log("DOM готов - можно работать с элементами");
});

window.addEventListener("load", function() {
  console.log("Все ресурсы загружены - все изображения готовы");
});

Когда использовать onload?

  • Инициализация сложного функционала после загрузки всех ресурсов
  • Скрытие preloader'ов и loading-индикаторов
  • Работа с изображениями, требующая информации об их размерах
  • Запуск анимаций только когда все ресурсы готовы
  • Применение начальных стилей к загруженным элементам

Однако для большинства задач инициализации рекомендуется использовать DOMContentLoaded, так как onload может замедлить отображение страницы из-за ожидания загрузки всех изображений и медиа-файлов.