代码之家 › 专栏 › 技术社区 › Jeroen

在Chrome中使用图像的“预取”链接

link-prefetch google-chrome image html javascript

Jeroen · 技术社区 · 5 年前

假设以下代码片段:

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">

火狐71 、离线使用Web开发工具, 然后按下按钮, 图像加载完美 。正如我所期望的那样,开发人员工具中的“网络”选项卡显示了预取的图像。

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

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

以下是Chrome中的请求:

预取请求已扩展:

我做错了什么?

0 回复 | 直到 5 年前

Evert 5 年前

预取的主要目的是告诉浏览器在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;
  });
});

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前