Предварительная загрузка / кеширование изображений с URL-адресами, отвечающими на HTTP-перенаправления

Question

Я бы хотел, чтобы браузер предварительно загружал / кэшировал изображения, чтобы они загружались быстрее. Обычно это делается следующим образом:

var URL = "http://example.com/image.jpg";
var image = new Image();
image.src = URL;

Но в моем случае URL-адрес отвечает HTTP-перенаправлением, которое выглядит примерно так:

$ curl -i "http://example.com/image.jpg"
HTTP/2 302
content-type: text/html; charset=utf-8
location: http://example.com/resolved.jpg
content-length: 0

Возможно, именно поэтому предварительная загрузка / кэширование не работает? (Я успешно протестировал свой код с разрешенными URL-адресами вместо исходных URL-адресов, и предварительная загрузка / кэширование работало нормально.)

Answer 1

Принятый ответ здесь неверен. Последующий ответ контента может быть кэширован (если он обслуживается соответствующими заголовками), но первоначальный ответ 302, скорее всего, нет. И большая часть ваших затрат на производительность заключается в задержке поездок туда и обратно на сервер. Хотя вы могли бы вернуть 301, я бы настоятельно советовал против этого. Очень и очень редко можно использовать 301. Правильное решение - сделать ответ 200 на первый запрос.

Answer 2

Вы можете предварительно загрузить изображения в виде BLOB-объектов, а затем использовать URL-адреса BLOB-объектов. Вы можете использовать XHR-запрос (вы можете использовать xhr.responseURL для загрузки BLOB-объектов) или получить API-интерфейс (полифилл доступен).

let convertUrlToImage = (url) => {
    return fetch(url).then((response) => {
      if (response.redirected) {
        console.log(`redirected to [${response.url}]`)
      } 
      return response.blob();
    }).then((imageBlob) => {
      return new Promise((resolve) => {
        var image = new Image();
        image.src = URL.createObjectURL(imageBlob);
        image.onload = function() {
            resolve(image)
        }
      });
    });
}

let images = ["flor.jpg", "animal.jpg", "human.jpg"];
let imagesPromises  = images.map(convertUrlToImage);
Promise.all(imagesPromises).then((images) => {
    //do whatever with images: Image[];
});

Вы можете настроить выборку, чтобы она следовала или не следовала за перенаправлениями, см .: https://developer.mozilla.org/en-US/docs/Web/API/Response/redirected