JS об'єкт Progress
Загальний опис
Progress Events – це події 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 буде недоступним, і прогрес можна лише відслідковувати частково.
Progress Events також працюють у випадках завантаження медіафайлів через об'єкти типу FileReader або <img>. Наприклад, у File API для зчитування великих файлів з локальної файлової системи FileReader може викликати progress події для оновлення користувача щодо статусу завантаження. Це робить Progress Events універсальним інструментом для відстеження будь-яких видів передачі даних.
| Порада: | Якщо відсоток прогресу постійно 100%, перевірте подію |
| Порада: | Оберіть події для відміни або скидання завантаження. Враховуйте, що користувач може скасувати завантаження, і тоді буде корисно обробити події |
| Порада: | Уникайте |
Синтаксис
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 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
2 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей код завантажує великий файл і відстежує його прогрес. Подія progress використовується для обчислення і відображення відсотка завантаження, а також є обробники для завершення (onload) та помилки (onerror). Це підходить для відстеження великих завантажень, які потребують часу.
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();Цей приклад демонструє використання Progress Events з FileReader для зчитування локального файлу, вибраного користувачем. При читанні файлу подія progress показує відсоток, що дозволяє відслідковувати, наскільки завантажено файл у пам'ять.
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);
}
});Методи
Властивості
lengthComputable- Вказує, чи можна обчислити загальну довжину (розмір) операції завантаження. Повертає `true`, якщо відомо загальний обсяг даних для завантаження, і `false` в іншому випадку.
loaded- Повертає кількість байтів, які були успішно завантажені на поточний момент. Використовується для визначення прогресу завантаження.
total- Показує загальний обсяг байтів, який потрібно завантажити, якщо він відомий. У поєднанні з `loaded` допомагає обчислювати відсоток завантаження.