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

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

Подія loadstart спрацьовує на самому початку завантаження ресурсу, такого як аудіо, відео, або дані, що завантажуються за допомогою API. Це перший крок у ланцюгу подій, пов'язаних із завантаженням, і його корисно використовувати для індикації того, що процес завантаження щойно розпочався. Наприклад, у разі завантаження відео можна показати спіннер або повідомлення "Завантаження розпочато" ще до того, як з'явиться можливість відтворювати файл.

Подію loadstart зазвичай використовують у медіаплеєрах, де важливо забезпечити користувача зворотним зв'язком на етапі початку завантаження. У поєднанні з іншими подіями завантаження, такими як progress, load або loadeddata, вона дозволяє більш точно контролювати процес завантаження медіафайлів або даних.

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

const video = document.querySelector('video');

video.addEventListener('loadstart', function() {
  console.log('Завантаження відео розпочато');
});

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

Подія loadstart також може бути застосована до інших типів завантажуваних ресурсів, наприклад, для роботи з XMLHttpRequest, Fetch API або завантаженням зображень. Це дозволяє відстежувати старт будь-якого завантаження і забезпечувати користувача відповідним інтерфейсом, наприклад, відображати індикатор завантаження або змінювати статус завантаження.

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

правити

Порада

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

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

Порада

При використанні Fetch API або XMLHttpRequest для завантаження даних, подія loadstart дозволяє інформувати користувача про початок запиту. Це корисно для показу індикатора активності або повідомлень про стан запиту.

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

Порада

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

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<video id="videoPlayer" width="320" height="180" controls>
    <source src="film.mp4" type="video/mp4">
</video>
<div id="statusMessage">Демонстраційний елемент</div>

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();

<div id="statusMessage">Демонстраційний елемент</div>

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();