Track the progress of downloading an image and at the same time preserve browser caching?

Question

JavaScript

I know it's possible to programmatically load an image while keeping it cached by the browser like so:

let img=new Image()
img.onload=()=>imgFromDOM.src=url
img.src=url

I also know that you can track the loading of an image by making an XHR request and then putting the image data into a blob:

var xmlHTTP=new XMLHttpRequest();
  xmlHTTP.open('GET',url,true);
  xmlHTTP.responseType='arraybuffer';
  xmlHTTP.onload = function(e) {
    var blob=new Blob([this.response]);
    thisImg.src=window.URL.createObjectURL(blob);
  };
  xmlHTTP.onprogress = function(e) {
    thisImg.completedPercentage=parseInt((e.loaded / e.total)*100);
  };
  xmlHTTP.onloadstart = function() {
    thisImg.completedPercentage=0;
  };
  xmlHTTP.send();

The question is how to combine these two things?
Of course, I could use localstorage and build my cache with crutches and blobs, but instead of putting such a restriction on myself, I want everything to work as usual, so that the pictures are simply cached by their url, but at the same time I could to load them and track their loading programmatically.
Is it possible to implement this and how?

Answer 1

That's it, I evolved to the realization that all this time I was trying to load images from third-party resources with XHR, which is prohibited in browsers, and I got an error instead of an image. Because my system, alas, is impossible to do, at least using only js, however, local images are indeed cached after XHR loading.