Использование ссылок "prefetch" для изображений в 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 , в автономном режиме с использованием инструментов сетевого разработчика, , а затем нажмите кнопка изображение не загружается . Я так и подозревал, потому что на вкладке «Сеть» отображаются странные записи для предварительных выборок.

Большинство ресурсов, в особенности 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;
  });
});