События загрузки страницы
При запуске веб-страницы, HTML-документ живет в 3х стадиях (событиях), каждую из которых можно обработать.
DOMContentLoaded— браузер загрузил HTML и построил DOM-дерево.load— браузер загрузил все ресурсы (стили, шрифты и т.д.).beforeunloadиunload— закрытие страницы.
DOMContentLoaded
Происходит на document когда все DOM-элементы разметки уже созданы, к ним можно получить доступ, вешать обработчики событий, создавать динамические элементы.
В момент возникновения этого события могут быть не загружены шрифты, изображения, подключаемые файлы стилей.
Если в документе есть теги script, то браузер обязан их выполнить до того, как построит DOM.
DOMContentLoaded ждёт загрузки и выполнения таких скриптов, за исключением скриптов с атрибутами async и defer, которые подгружаются асинхронно.
Подключаемые файлы стилей никак не влияют на событие DOMContentLoaded.
load
Событие срабатывает на window, когда загружается вся страница, включая ресурсы на ней — стили, картинки и т.д.
Используется редко, ибо нет нужды ждать загрузку всех ресурсов.
beforeunload
Событие срабатывает на window. Используется для проверки сохранения введенных пользователем данных и действительно ли он хочет покинуть страницу.
Если посетитель инициировал переход на другую страницу или нажал закрыть окно, то обработчик beforeunload может приостановить процесс и спросить подтверждение. Для этого ему нужно вернуть строку, которую браузеры покажут посетителю, спрашивая – нужно ли переходить.
unload
Когда пользователь уходит со страницы или закрывает окно, на window срабатывает событие unload.
Можно закрыть вспомогательные popup-окна.
Нельзя отменить сам переход.
Событие используется редко.
Last updated