JS об'єкт ProgressEvent

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

ProgressEvent – це події JavaScript, які використовуються для відстеження процесу завантаження або передачі даних, таких як завантаження файлів, зображень, відео або запити на сервер. До основних подій належать loadstart, progress, load, loadend, abort, error та timeout. Кожна з цих подій допомагає визначити різні етапи завантаження: наприклад, progress інформує про поточний стан завантаження, а loadend спрацьовує при завершенні завантаження незалежно від успіху або помилки.

Подія progress найчастіше використовується для інформування користувача про стан завантаження, зокрема через відображення індикатора прогресу. Об'єкт ProgressEvent містить властивість loaded, яка показує кількість байтів, що були завантажені, та властивість total, яка вказує на загальний розмір. Якщо total доступний, можна обчислити відсоток завантаження за формулою (loaded / total) * 100.

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

xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    let percentComplete = (event.loaded / event.total) * 100;
    console.log(`Завантажено: ${percentComplete}%`);
  }
};

Цей приклад показує використання події progress для обчислення відсотка завантаження під час HTTP-запиту. Метод lengthComputable визначає, чи відомий загальний розмір файлу (event.total). Якщо він невідомий, event.total буде недоступним, і прогрес можна лише відслідковувати частково.

ProgressEvent також працюють у випадках завантаження медіафайлів через об'єкти типу FileReader або <img>. Наприклад, у File API для зчитування великих файлів з локальної файлової системи FileReader може викликати progress події для оновлення користувача щодо статусу завантаження. Це робить ProgressEvent універсальним інструментом для відстеження будь-яких видів передачі даних.

правити

Порада

Оберіть події для відміни або скидання завантаження. Враховуйте, що користувач може скасувати завантаження, і тоді буде корисно обробити події abort або error. Це забезпечить стабільність роботи вашого індикатора прогресу і дасть можливість відобразити стан скасування.

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

Порада

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

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

Порада

Якщо відсоток прогресу постійно 100%, перевірте подію loadend. Якщо подія progress показує максимальне завантаження, це може означати, що дані вже були отримані, але не завершене завантаження. Тому додатково використовуйте loadend для обробки остаточного завершення процесу.

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

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

Синтаксис

element.addEventListener('progress', function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log(`Прогрес: ${percentComplete}%`);
  }
});

властивості

Переглядачі

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

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

Переглядач
	1	3.5	3.1	≤12.1	12	10

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

Переглядач
	4.4	18	4	2

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

Переглядач
	1.3

Приклади

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

<input type="text" id="fileInput" value="текст для прикладу" placeholder="Введи щось">

const fileInput = document.querySelector("#fileInput");
const reader = new FileReader();

reader.onprogress = function(event) {
  if (event.lengthComputable) {
    let percentComplete = (event.loaded / event.total) * 100;
    console.log(`Читання файлу: ${percentComplete.toFixed(2)}%`);
  }
};

reader.onloadend = function() {
  console.log("Читання файлу завершено!");
};

fileInput.addEventListener("change", function() {
  const file = fileInput.files[0];
  if (file) {
    reader.readAsDataURL(file);
  }
});

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/largefile", true);

xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    let percentComplete = (event.loaded / event.total) * 100;
    console.log(`Завантажено: ${percentComplete.toFixed(2)}%`);
  }
};

xhr.onload = function() {
  console.log("Завантаження завершено!");
};

xhr.onerror = function() {
  console.log("Помилка при завантаженні файлу.");
};

xhr.send();