Точный индикатор прогресса с использованием XMLHttpRequest

Question

Я пытаюсь предварительно загрузить файлы с помощью массива URL-адресов и хочу отслеживать ход завершения всего процесса:

Вот код:

preload([

https://example.com/directory_A/voice.mp3",
https://example.com/directory_B/bg.jpg",
https://example.com/directory_C/script.js",

]);

function preload(arr){
arr = arr.map(x => encodeURI(x));   
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.Preload = factory());
}(this, (function () { 'use strict';

    function preloadOne(url, done) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onprogress = event => {

            if (!event.lengthComputable) return false
            let item = this.getItemByUrl(event.target.responseURL);
            item.completion = parseInt((event.loaded / event.total) * 100);
            item.downloaded = event.loaded;
            item.total = event.total;
            this.updateProgressBar(item);
        };
        xhr.onload = event => {
            let type = event.target.response.type;
            let blob = new Blob([event.target.response], { type: type });
            let url = URL.createObjectURL(blob);
            let responseURL = event.target.responseURL;
            let item = this.getItemByUrl(responseURL);
            item.blobUrl = url;
            item.fileName = responseURL.substring(responseURL.lastIndexOf('/') + 1);
            item.type = type;
            item.size = blob.size;
            done(item);
        };

        xhr.onerror = event => {
        console.log('an error happed herrt')
    };

        xhr.send();
    }

    function updateProgressBar(item) {

        var sumCompletion = 0;
        var maxCompletion = this.status.length * 100;

        for (var itemStatus of this.status) {
            if (itemStatus.completion) {
                sumCompletion += itemStatus.completion;
            }
        }
        var totalCompletion = parseInt((sumCompletion / maxCompletion) * 100);

        if (!isNaN(totalCompletion)) {
            this.onprogress({
                progress: totalCompletion,
                item: item
            });
        }
    }

    function getItemByUrl(rawUrl) {
        for (var item of this.status) {
            if (item.url == rawUrl) return item
        }
    }

    function fetch(list) {  
        return new Promise((resolve, reject) => {
            this.loaded = list.length;
            for (let item of list) {
                this.status.push({ url: item });
                this.preloadOne(item, item => {
                    this.onfetched(item);
                    this.loaded--;
                    if (this.loaded == 0) {
                        this.oncomplete(this.status);
                        resolve(this.status);
                    }
                });
            }
        })
    }

    function Preload() {
        return {
            status: [],
            loaded: false,
            onprogress: () => {},
            oncomplete: () => {},
            onfetched: () => {},
            fetch,
            updateProgressBar,
            preloadOne,
            getItemByUrl
        }
    }

    return Preload;

})));


const preload = Preload();

preload.fetch(arr).then(items => {
  // use either a promise or 'oncomplete'
  console.log(items);
});

preload.oncomplete = items => {
  console.log(items);
}

preload.onprogress = event => {
  console.log(event.progress + '%');
}

preload.onfetched = item => {
  console.log(item);
}

}

Проблема в процент выполнения достигает (почти всегда) 44%, и внезапная предварительная загрузка завершается! Почему он не достигает 100 процентов до завершения?

Я хочу отслеживать прогресс от 0 до 100 процентов. Как я могу это исправить?