While an img download is in progress, the Performance api does not update the transferSize while downloading, only when finished

I am using the Performance API to monitor how a download of an image is going. This is for the purpose of a live jpg image stream and to detect when a download is stalling. So I wanted to monitor if the downloaded size is still increasing. However, the resource event is only triggered when it has downloaded completely. I use it like this:

        var currentObserver = null;
        function setupObserver(observeUrl) {
            currentObserver = null;
            currentObserver = new PerformanceObserver((list, obj) => {
              list.getEntries().forEach((entry) => {
                if(entry.name.indexOf(observeUrl) > 0) {
                    console.log("entry transferSize:", observeUrl, entry.transferSize);
                }
              });
            });
            currentObserver.observe({ entryTypes: ["resource"] });
        }

Is there a way to get more updates while downloading the image or should I observe some other entryType too?

Thank you very much for any ideas!

It seems the Performance api is not for this purpose. Using the Fetch api, it is now possible to fetch the image in the background and then monitor the download progress. Afterwards, we can assign the blob to a src of and <img>. So this answer is what I needed actually:

Fetch API Download Progress Indicator?