JS властивість Event.load

Загальний опис

Подія load викликається, коли весь вміст сторінки завантажений та повністю доступний для користувача. Це включає всі зовнішні ресурси, такі як зображення, файли стилів, скрипти тощо. На відміну від події DOMContentLoaded, яка спрацьовує після завантаження тільки HTML-документа, load чекає завершення завантаження всіх ресурсів.

Подію load можна застосовувати як до window, так і до окремих елементів, таких як зображення або iframe. Якщо прив'язати цю подію до window, то вона спрацьовуватиме, коли весь документ і ресурси будуть повністю завантажені. Це корисно, наприклад, коли потрібно виконати певні дії тільки після того, як всі елементи сторінки доступні для взаємодії.

Приклад використання:

window.addEventListener('load', function() {
  console.log('Сторінка повністю завантажена');
});

В цьому прикладі функція запускається тільки після того, як весь документ, разом із зображеннями, стилями та іншими ресурсами, буде повністю завантажений. Це корисно для ініціалізації поведінки, що залежить від зображень або інших ресурсів, які можуть завантажуватись довше.

Подію load також можна використовувати з окремими ресурсами, наприклад, зображеннями:

const img = document.querySelector('img');
img.addEventListener('load', function() {
  console.log('Зображення завантажено');
});

Цей приклад дозволяє перевірити, чи зображення було повністю завантажене, що може бути корисним для налаштування його відображення або запуску певних анімацій після завантаження.

Подія load є незамінною, коли важливо, щоб усі ресурси були доступні перед тим, як починати виконувати складну логіку або взаємодії з елементами сторінки. Це може включати динамічне завантаження контенту, анімації або обчислення, які залежать від розмірів та параметрів зображень та інших елементів.

правити

Порада

Завжди використовуйте стрілкові функції для подій, коли потрібно мати доступ до контексту об'єкта, що запускає подію. У випадку класичних функцій, контекст може втратитись, що призведе до неочікуваних результатів.

автор: Bond правити

Порада

Якщо плануєте ініціалізувати роботу з великими наборами даних після завантаження сторінки, корисно поєднувати подію load з асинхронними операціями, наприклад, завантаженням даних через API. Це допоможе розподілити навантаження і прискорити відображення контенту для користувача.

автор: Bond правити

Порада

Для оптимізації продуктивності важливо розуміти, що подія load чекає завантаження всіх ресурсів сторінки. Якщо вам не потрібно чекати завантаження зображень або стилів, можливо, краще використовувати подію DOMContentLoaded, яка спрацьовує раніше.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

window.addEventListener('load', function() {
  // Ваш код тут
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<img src="/img/logo.svg" width="100" alt="Демо">

const images = document.querySelectorAll('img');
let loadedImages = 0;

images.forEach(img => {
  img.addEventListener('load', function() {
    loadedImages++;
    if (loadedImages === images.length) {
      console.log('Всі зображення завантажено');
    }
  });
});

window.addEventListener('load', function() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Помилка завантаження даних:', error));
});