/ ↲
    Расширенный поиск

    JavaScript

    load и DOMContentLoaded

    События загрузки страницы. Запускаем код, когда страница загрузилась.

    Время чтения: меньше 5 мин

    1. Кратко
    2. Как пишется
    3. Как понять
    4. На практике
      1. Николай Лопин

    Кратко

    Если нужно запустить JavaScript-код после того, как страница загрузилась, то нужно подписаться на одно из событий у объекта window:

    • DOMContentLoaded — событие происходит, когда браузер разобрал HTML-страницу и составил DOM-дерево;
    • load — событие происходит, когда загрузилась и HTML страница, и все ресурсы для её отображения пользователю: стили, картинки и так далее.

    DOMContentLoaded всегда происходит раньше, чем load. Чем больше стилей и картинок на странице, тем больше разница во времени между срабатыванием этих событий.

    Как пишется

            
          
          window.addEventListener('load', function () {  console.log('load!')})// это событие можно обрабатывать так же и на documentwindow.addEventListener('DOMContentLoaded', function () {  console.log('dom loaded!')})
          window.addEventListener('load', function () {
  console.log('load!')
})

// это событие можно обрабатывать так же и на document
window.addEventListener('DOMContentLoaded', function () {
  console.log('dom loaded!')
})

    Как понять

    Чтобы показать пользователю страницу, браузер делает следующие шаги:

    1. Запрашивает HTML-страницу с сервера;
    2. Обрабатывает полученный HTML и создаёт DOM для взаимодействия между JavaScript и HTML (☝️ в конце этого этапа происходит событие DOMContentLoaded);
    3. Запрашивает у сервера дополнительные файлы, встретившиеся при разборе HTML: картинки, шрифты, CSS- и JS-файлы;
    4. Получив все данные, отображает страницу пользователю (☝️ тут происходит событие load).

    Событие DOMContentLoaded гарантирует, что DOM готов. Можно искать узлы по нему и не бояться, что что-то не догрузилось.

    Событие load дополнительно гарантирует, что все стили и картинки готовы. В этот момент размеры элементов на страницы посчитаны верно и доступны. DOMContentLoaded таких гарантий не даёт.

    Открыть демо в новой вкладке

    На практике

    Николай Лопин

    🛠 Чаще всего используется DOMContentLoaded.

    🛠 Основной сценарий использования DOMContentLoaded: инициализация интерфейса и первые обращения к серверу.

    🛠 Нормальной практикой считается запуск всего приложения в момент срабатывания DOMContentLoaded, таким образом исключается случай, когда DOM ещё не догрузился, а приложение уже ищет по нему узлы.

    🛠 Событие load используется, когда код работает со стилями и другими параметрами отображения. Такой код нужен редко, поэтому и событие используется нечасто.

    Читайте также