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 є незамінною, коли важливо, щоб усі ресурси були доступні перед тим, як починати виконувати складну логіку або взаємодії з елементами сторінки. Це може включати динамічне завантаження контенту, анімації або обчислення, які залежать від розмірів та параметрів зображень та інших елементів.
| Порада: | Завжди використовуйте стрілкові функції для подій, коли потрібно мати доступ до контексту об'єкта, що запускає подію. У випадку класичних функцій, контекст може втратитись, що призведе до неочікуваних результатів. |
| Порада: | Якщо плануєте ініціалізувати роботу з великими наборами даних після завантаження сторінки, корисно поєднувати подію |
| Порада: | Для оптимізації продуктивності важливо розуміти, що подія |
Синтаксис
window.addEventListener('load', function() {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад ілюструє використання події load для активації кнопки після повного завантаження сторінки, а також демонструє взаємодію з користувачем через події.
У цьому прикладі після того, як сторінка повністю завантажена, виконується запит до API для отримання додаткових даних. Це допомагає зберегти швидкість відображення сторінки, адже контент не завантажується до події load.
window.addEventListener('load', function() {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Помилка завантаження даних:', error));
});Тут код відстежує завантаження всіх зображень на сторінці. Як тільки останнє зображення завантажене, виводиться повідомлення. Це підходить для випадків, коли важливо знати статус всіх зображень, наприклад, для створення галереї.
const images = document.querySelectorAll('img');
let loadedImages = 0;
images.forEach(img => {
img.addEventListener('load', function() {
loadedImages++;
if (loadedImages === images.length) {
console.log('Всі зображення завантажено');
}
});
});