3

假设以下代码段：

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，离线使用Web Developer Tools，然后按下按钮，图像加载完美。正如开发人员工具中的“网络”选项卡显示预取的图像一样，我期望如此。

Chrome 79，使用网络开发工具离线，然后按下按钮，图像不加载。我也很怀疑，因为“网络”选项卡显示了奇怪的预取条目。

大多数资源，尤其是caniuse.com，都注意到图像的跨浏览器支持prefetch，没有已知问题。所以我必须在某个地方进行推理。

以下是请求在 Chrome 中的样子：

显示失败请求的网络选项卡

并且预取请求扩展：

未加载图像预览

我究竟做错了什么？

4

1 回答 1

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;
  });
});
于 2020-01-06T21:36:59.887 回答