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

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

progress — це подія в JavaScript, яка виникає, коли медіа-елемент, наприклад, відео або аудіо, завантажує свої дані. Подія progress дозволяє відстежувати стан завантаження файлу, зокрема, коли нові частини даних були отримані. Це особливо корисно для медіафайлів, які передаються через мережу частинами, а не завантажуються миттєво.

Коли браузер завантажує відео або аудіо, подія progress дозволяє отримати інформацію про те, скільки даних було завантажено. Об'єкт події містить властивості, такі як event.loaded, що показує кількість байтів, які були завантажені, та event.total, що вказує загальний розмір файлу (якщо він відомий). Це дає можливість, наприклад, створити індикатор прогресу завантаження медіафайлу, який візуально показує користувачеві хід процесу.

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

let video = document.getElementById('myVideo');
video.addEventListener('progress', function(event) {
  if (event.lengthComputable) {
    let percentLoaded = (event.loaded / event.total) * 100;
    console.log(`Завантажено: ${percentLoaded}%`);
  }
});

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

Якщо браузер не може визначити загальний розмір медіафайлу (наприклад, через особливості мережі або сервера), подія progress все одно спрацьовує, але властивість event.lengthComputable буде false. У такому випадку ви не зможете визначити точний відсоток завантаження, але все одно можете виводити інші повідомлення про хід завантаження.

Порада:	Подія `progress` може спрацьовувати багато разів під час завантаження медіа, що дозволяє постійно оновлювати стан завантаження. Однак подія не спрацьовує після завершення завантаження медіа. Для цього є інша подія — `canplaythrough`, яка сигналізує про те, що медіафайл повністю готовий до безперервного відтворення.
Порада:	Подія `progress` не показує момент завершення завантаження медіафайлу. Для цього використовуйте `canplaythrough` або інші події, наприклад, `loadeddata`.
Порада:	Використовуйте `progress` для відображення статусу завантаження не тільки для медіафайлів, але й для інших типів великих файлів, наприклад, при завантаженні через API.

Синтаксис

element.addEventListener('progress', function(event) {
  // Ваш код
});

Значення

Return

Переглядачі

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

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

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

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

let video = document.getElementById('myVideo');
let progressBar = document.getElementById('progressBar');

video.addEventListener('progress', function(event) {
  if (event.lengthComputable) {
    let percent = (event.loaded / event.total) * 100;
    progressBar.style.width = percent + '%';
    console.log(`Завантажено ${percent}%`);
  } else {
    console.log('Неможливо розрахувати прогрес');
  }
});

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

let video = document.getElementById('myVideo');
let lastUpdate = Date.now();

video.addEventListener('progress', function(event) {
  let now = Date.now();
  if (now - lastUpdate > 1000) { // Оновлюємо кожну секунду
    if (event.lengthComputable) {
      let percent = (event.loaded / event.total) * 100;
      console.log(`Оновлено через 1 сек: Завантажено ${percent}%`);
    }
    lastUpdate = now;
  }
});

JS довідник

JavaScript

Наповнення JS розділу