Я знаю, что можно программно загрузить изображение, сохранив его кэширование браузером вот так:
let img=new Image()
img.onload=()=>imgFromDOM.src=url
img.src=url
Также я знаю, что можно отследить загрузку изображения, если сделать XHR запрос и затем поместить данные о картинке в блоб:
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();
Вопрос в том, как совместить эти две вещи?
Я конечно мог бы использовать localstorage и построить свой кэш с костылями и блобами, но вместо того, чтобы навешивать на себя такое ограничение, я хочу, чтобы всё работало как обычно, чтобы картинки просто кэшировались по своему url'у, но при этом я мог бы загружать их и отслеживать их загрузку программно.
Возможно ли это реализовать и как?
