Событие onload в JavaScript

Событие onload или просто load наступает при загрузке страницы или какого-либо контента, который подгружается в вашу страницу. Это может быть изображение, видео-, аудио-файл или другая html-страница, которая загружается в теге iframe.

Загрузка страницы

Записывать обработчик события onload при отслеживании загрузки страницы можно так:

//неименованная и именованная функции
window.onload = function(){
  haveFun();
  init();
}

window.onload = setBackground;

//с помощью addEventListener
window.addEventListener("load", setBackground);

window.addEventListener("load", () => {
  setBackground();
  init();
})

//неименованная и именованная функции

window.onload = function(){

haveFun();

init();

}

window.onload = setBackground;

//с помощью addEventListener

window.addEventListener("load", setBackground);

window.addEventListener("load", () => {

setBackground();

init();

})

Как видно, элементом, для которого отслеживается это событие, является глобальный объект Window, отвечающий за все окно браузера.

На практике рассмотрим добавление обработчика события onload на примере отображения приветствия и фоновой картинки в зависимости о времени суток.

Код проверяет время каждый час с помощью метода setInterval(), и в зависимости от этого устанавливает новый фон и сообщение, выбирая данные из массива объектов.

See the Pen Dynamic Time-Based Wallpaper by Envato Tuts+ (@tutsplus) on CodePen.

Нужно понимать, что событие onload для всей страницы дожидается загрузки всего контента, включая такие "тяжёлые" элементы, как картинки или видео. То есть в этом случае ждать загрузки страницы с большим количеством изображений придётся долго.

Альтернативой обработки события onload в данном случае будет обработка события DOMContentLoaded, которая добавляется только с помощью метода addEventListener():

document.addEventListener("DOMContentLoaded", 
  function(event) { 
     console.log("DOM структура загружена"); 
});

document.addEventListener("DOMContentLoaded",

function(event) {

console.log("DOM структура загружена");

});

В этом случае нужно дождаться только загрузки текстового содержимого, т.е. DOM-структуры html-документа, но ждать загрузки картинок и видео не придется.

Обычно этот обработчик события используется, когда тег <script> расположен в верхней части документа, в блоке <head>. В этом случае без обработки события DOMContentLoaded или load нельзя будет получить доступ к элементам DOM-структуры страницы. Обработка этих событий не имеет смысла, если тег <script> располагается перед </body>: в этом случае браузер уже знает всю структуру элементов и доступ к ним будет простым.

Пример использования события onload для создания предзагрузчика

Классическим вариантом отслеживания события onload является создание и отображение предзагрузчика. У этого способа показа страницы пользователю есть свои плюсы и минусы. В качестве плюса можно отметить то, что после того, как прелоадер спрятан, страница показывается пользователю сразу, без медленной загрузки изображений и видео. В плане минусов - при слабом Интернет-соединении пользователь может не дождаться загрузки всей страницы и просто закрыть вкладку браузера, поэтому смысл предзагрузчика теряется.

В JS-коде для примера ниже в обработчике события onload выполняется только одно действие - прелоадер прячется за счет назначения ему класса со свойством display: none в css-свойствах. Страница содержит несколько изображений размером 800x600px и ссылку на Youtube-ролик. Нажмите на кнопку "Run Pen" для отображения процесса загрузки.

See the Pen Page preloader by Elen (@ambassador) on CodePen.

Для того чтобы видеть предзагрузчик дольше, стоит изменить скорость загрузки в на низкую в Инструментах разработчика в Google Chrome или другом браузере. На вкладке Сеть (Network) при этом вы увидите, сколько запросов идет к серверу(ам), и как быстро/медленно загружаются внешние ресурсы. В примере также использован шрифт с ресурса Google Fonts.

Управление скоростью загрузки в Инструментах разработчика в Google Chrome

Также вы можете перейти по этой ссылке на смартфоне при включенном мобильном интернете.

Загрузка картинок

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

В примере ниже в момент, когда мы динамически формируем путь к картинке с ресурса unsplash.com при клике на кнопке, мы отображаем предзагрузчик. Когда же картинка загрузилась, презагрузчик исчезает за счет добавления ему свойства display: none. Чем больше по размеру изображение, тем дольше вы видите предзагрузчик.

See the Pen Image onload by Elen (@ambassador) on CodePen.

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