fred55rus
@fred55rus

Отследить прогресс загрузки картинки и при этом сохранить браузерное кэширование?

Я знаю, что можно программно загрузить изображение, сохранив его кэширование браузером вот так:
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'у, но при этом я мог бы загружать их и отслеживать их загрузку программно.

Возможно ли это реализовать и как?
  • Вопрос задан
  • 268 просмотров
Решения вопроса 1
fred55rus
@fred55rus Автор вопроса
Всё, я эволюционировал до осознания того, что я всё это время пытался грузить XHR'ом картинки со сторонних ресурсов, что запрещено в браузерах, и получал ошибку вместо картинки. Потому мою систему, увы, сделать невозможно, по крайней мере используя только js, однако локальные картинки действительно кэшируются после XHR загрузки.
5b4c4fa7e3875279634242.png
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы