События загрузки страницы

При запуске веб-страницы, HTML-документ живет в 3х стадиях (событиях), каждую из которых можно обработать.

1. DOMContentLoaded — браузер загрузил HTML и построил DOM-дерево.

2. load — браузер загрузил все ресурсы (стили, шрифты и т.д.).

3. beforeunload и unload — закрытие страницы.

DOMContentLoaded

Происходит на document когда все DOM-элементы разметки уже созданы, к ним можно получить доступ, вешать обработчики событий, создавать динамические элементы.

В момент возникновения этого события могут быть не загружены шрифты, изображения, подключаемые файлы стилей.

document.addEventListener('DOMContentLoaded', callback)

Если в документе есть теги script, то браузер обязан их выполнить до того, как построит DOM.

DOMContentLoaded ждёт загрузки и выполнения таких скриптов, за исключением скриптов с атрибутами async и defer, которые подгружаются асинхронно.

Подключаемые файлы стилей никак не влияют на событие DOMContentLoaded.

Статья о DomContentLoaded

load

Событие срабатывает на window, когда загружается вся страница, включая ресурсы на ней — стили, картинки и т.д.

Используется редко, ибо нет нужды ждать загрузку всех ресурсов.

beforeunload

Событие срабатывает на window. Используется для проверки сохранения введенных пользователем данных и действительно ли он хочет покинуть страницу.

Если посетитель инициировал переход на другую страницу или нажал закрыть окно, то обработчик beforeunload может приостановить процесс и спросить подтверждение. Для этого ему нужно вернуть строку, которую браузеры покажут посетителю, спрашивая – нужно ли переходить.

unload

Когда пользователь уходит со страницы или закрывает окно, на window срабатывает событие unload.

Можно закрыть вспомогательные popup-окна.

Нельзя отменить сам переход.

Событие используется редко.