load

Событие 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 используется, когда код работает со стилями и другими параметрами отображения. Такой код нужен редко, поэтому и событие используется нечасто.