JS властивість Event.loadstart
Загальний опис
Подія loadstart спрацьовує на самому початку завантаження ресурсу, такого як аудіо, відео, або дані, що завантажуються за допомогою API. Це перший крок у ланцюгу подій, пов'язаних із завантаженням, і його корисно використовувати для індикації того, що процес завантаження щойно розпочався. Наприклад, у разі завантаження відео можна показати спіннер або повідомлення "Завантаження розпочато" ще до того, як з'явиться можливість відтворювати файл.
Подію loadstart зазвичай використовують у медіаплеєрах, де важливо забезпечити користувача зворотним зв'язком на етапі початку завантаження. У поєднанні з іншими подіями завантаження, такими як progress, load або loadeddata, вона дозволяє більш точно контролювати процес завантаження медіафайлів або даних.
Приклад використання:
const video = document.querySelector('video');
video.addEventListener('loadstart', function() {
console.log('Завантаження відео розпочато');
});
Цей приклад відстежує початок завантаження відеофайлу і виводить повідомлення в консоль. Це може бути використано для початкової індикації процесу завантаження перед тим, як з'являться перші медіадані або можливість відтворення.
Подія loadstart також може бути застосована до інших типів завантажуваних ресурсів, наприклад, для роботи з XMLHttpRequest, Fetch API або завантаженням зображень. Це дозволяє відстежувати старт будь-якого завантаження і забезпечувати користувача відповідним інтерфейсом, наприклад, відображати індикатор завантаження або змінювати статус завантаження.
У контексті обробки завантажуваних ресурсів, ця подія є корисною частиною для початкового інформування про те, що процес розпочався, але не дає ніякої інформації про те, скільки ресурсів вже завантажено або як довго цей процес триватиме.
| Порада: | У випадках, коли завантаження може бути перервано або скасовано, подія |
| Порада: | При використанні Fetch API або XMLHttpRequest для завантаження даних, подія |
| Порада: | З подією |
Синтаксис
element.addEventListener('loadstart', function() {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад демонструє, як за допомогою події loadstart можна вивести індикатор завантаження та інформувати користувача про початок процесу завантаження відео. Користувач натискає кнопку "Завантажити відео", і на екрані з'являється індикатор, який зникає після того, як відео буде готове до відтворення. Це підвищує зручність користування, даючи зрозуміти, що процес завантаження вже розпочався.
У цьому прикладі ми використовуємо подію loadstart, щоб оновити текстовий статус, коли завантаження відео розпочалося. Це дозволяє користувачам бачити, що завантаження вже почалося, навіть якщо саме відео ще не доступне для відтворення.
const video = document.getElementById('videoPlayer');
const status = document.getElementById('statusMessage');
video.addEventListener('loadstart', function() {
status.textContent = 'Завантаження відео розпочато...';
});
video.src = 'https://www.example.com/sample-video.mp4';
video.load();У цьому прикладі подія loadstart використовується для показу повідомлення, коли починається запит до сервера за допомогою XMLHttpRequest. Це корисно для інформування користувача про старт процесу, наприклад, під час виконання асинхронного запиту для отримання даних з API.
const xhr = new XMLHttpRequest();
const status = document.getElementById('statusMessage');
xhr.open('GET', 'https://www.example.com/data');
xhr.addEventListener('loadstart', function() {
status.textContent = 'Запит даних розпочато...';
});
xhr.send();