Использование ссылок предварительной загрузки для изображений в Chrome

Question

Предположим следующий фрагмент:

document.addEventListener("DOMContentLoaded", () => {
  const src = "https://via.placeholder.com/200x100?text=loaded";
  
  const link = document.createElement("link");
  link.rel = "prefetch";
  link.as = "image";
  link.href = src;
  document.head.append(link);
  
  document.getElementById("btn").addEventListener("click", () => {
    document.getElementById("img").src = src;
  });
});

<button id="btn">Press me to show prefetched image (but go offline first!)</button>
<br><img id="img" src="" alt="press button to load prefetched image">

Firefox 71 в автономном режиме с помощью инструментов веб-разработчика, затем нажмите кнопку,изображение загрузится отлично. Я ожидал этого, потому что вкладка "Сеть" в инструментах разработчика показывала предварительно загруженное изображение.

Chrome 79 в автономном режиме с помощью Network Dev Tools, затем нажмите кнопку,изображение не загружается. Я так и подозревал, потому что на вкладке "Сеть" отображаются странные записи для предварительной выборки.

Большинство ресурсов, в первую очередь https://caniuse.com/, замечают кроссбраузерную поддержку дляprefetchизображений без известных проблем. Так что я должен где-то отказаться от своих рассуждений.

Вот как выглядят запросы в Chrome:

и запрос предварительной выборки расширен:

Что я делаю неправильно?

Answer 1

Основная цель предварительной выборки - указать браузеру начать захват данных, как только прибыли первые байты вашего html (или еще лучше, заголовки HTTP). Это происходит даже до того, как javascript начнет выполняться или DOM будет готов. Использование его динамически с javascript не имеет большого смысла.

Поэтому я не удивлен, что (некоторые) браузеры не слушают <link>изменяет и загружает вещи по мере их добавления в этот список. Я очень удивлен, что Firefox вообще это делает.

Для предварительной загрузки изображения вы можете просто использовать традиционный метод:

document.addEventListener("DOMContentLoaded", () => {
  const src = "https://via.placeholder.com/200x100?text=loaded";

  const img = new Image();
  link.src = src;

  document.getElementById("btn").addEventListener("click", () => {
    document.getElementById("img").src = src;
  });
});