load
Событие load происходит, когда загрузилась и HTML страница (за это отвечает событие DOMContentLoaded), и все ресурсы для её отображения пользователю: стили, картинки и другое.
Можно подписаться на объект window:
window.addEventListener('load', function () {
console.log('Страница готова!')
})
Или поймать событие на элементах, у которых есть ресурс загрузки:
const img = document.getElementById('img')
img.addEventListener('load', function () {
alert('А вот и картиночка')
})
Событие load гарантирует, что браузер отображает страницу полностью: все стили и картинки готовы, размеры элементов на странице посчитаны верно и доступны. Предшествующее load событие DOMContentLoaded таких гарантий не даёт. То же самое с отдельными элементами на странице: если случился load, значит элемент полностью загрузился.
👉 @seniorFront