Клавиша / esc

load

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

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

Кратко

Скопировано

Событие load происходит, когда загрузилась и HTML-страница (за это отвечает событие DOMContentLoaded), и все ресурсы для её отображения пользователю: стили, картинки и другое.

Как пишется

Скопировано

Можно подписаться на объект window:

        
          
          window.addEventListener('load', function () {  console.log('Страница готова!')})
          window.addEventListener('load', function () {
  console.log('Страница готова!')
})

        
        
          
        
      

Или поймать событие на элементах, у которых есть ресурс загрузки:

        
          
          const img = document.getElementById('img')img.addEventListener('load', function () {  alert('А вот и картиночка')})
          const img = document.getElementById('img')

img.addEventListener('load', function () {
  alert('А вот и картиночка')
})

        
        
          
        
      

Как понять

Скопировано

Событие load гарантирует, что браузер отображает страницу полностью: все стили и картинки готовы, размеры элементов на странице посчитаны верно и доступны. Предшествующее load событие DOMContentLoaded таких гарантий не даёт. То же самое с отдельными элементами на странице. Если случился load, значит элемент полностью загрузился.

Попробуйте открыть новую страничку кнопкой в демо:

        
          
          window.addEventListener('load', function () {  alert('Хоп! Страничка полностью загрузилась, поэтому стили радуют глаз!')})
          window.addEventListener('load', function () {
  alert('Хоп! Страничка полностью загрузилась, поэтому стили радуют глаз!')
})

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

На практике

Скопировано

Николай Лопин советует

Скопировано

🛠 Чаще применяют DOMContentLoaded.

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