ProgressEvent

Интерфейс ProgressEvent представляет события, измеряющие прогресс базового процесса, например, HTTP-запроса (для XMLHttpRequest, или загрузки базового ресурса <img>, <audio>, <video>, <style> или <link>).

ProgressEvent()

Создает событие ProgressEvent с заданными параметрами.

Также наследует свойства от родительского класса Event.

ProgressEvent.lengthComputable Только для чтения

Флаг булевого типа, указывающий, можно ли вычислить отношение между размером уже переданных или обработанных данных (loaded) и общим размером данных (total). Другими словами, он показывает, можно ли измерить прогресс или нет.

ProgressEvent.loaded Только для чтения

Целое беззнаковое 64-битное число, указывающее размер данных, уже переданных или обработанных, в байтах. Отношение можно вычислить, разделив значение ProgressEvent.total на значение этого свойства. При загрузке ресурса с помощью HTTP, учитывается только тело HTTP-сообщения, а не заголовки и другие накладные расходы. Обратите внимание, что для сжатых запросов неизвестного общего размера, loaded может содержать размер сжатых или распакованных данных, в зависимости от браузера. На 2024 год, Firefox содержит размер сжатых данных, а Chrome – размер несжатых данных.

ProgressEvent.total Только для чтения

Целое беззнаковое 64-битное число, указывающее общий размер, в байтах, передаваемых или обрабатываемых данных. При загрузке ресурса с помощью HTTP, это значение взято из Content-Length заголовка ответа. Учитывается только тело HTTP-сообщения, а не заголовки и другие накладные расходы.

Наследует методы от родительского класса Event.

В следующем примере добавляется ProgressEvent к новому XMLHTTPRequest и используется для отображения состояния запроса.

const progressBar = document.getElementById("p"),
  client = new XMLHttpRequest();
client.open("GET", "magical-unicorns");
client.onprogress = (pe) => {
  if (pe.lengthComputable) {
    progressBar.max = pe.total;
    progressBar.value = pe.loaded;
  }
};
client.onloadend = (pe) => {
  progressBar.value = pe.loaded;
};
client.send();

• Базовый интерфейс Event.