如何预取图像？答案

【问题标题】：How to prefetch images?如何预取图像？
【发布时间】：2015-12-10 22:54:45
【问题描述】：

我正在使用 Firefox 40.0.3 并且有一些我想要预取的大图像。因此，在头部我写：

<head>
   .
   .
   .
   <link rel="prefetch" href="/static/CSS/images/1.png">
   <link rel="prefetch" href="/static/CSS/images/2.png">
   <link rel="prefetch" href="/static/CSS/images/3.png">
</head>

当我清除缓存时，重新加载页面，然后使用this tool 查看缓存的内容。好像没有缓存图片。

我该如何解决？

【问题讨论】：

您是否尝试过使用图片的完整链接来代替？
您使用哪种浏览器？
@jaunt，是的。并且完整链接不会使其预取。
@nlips Firefox 40.0.3
这是我的网站：nztracker.nz

标签： html firefox caching browser-cache

【解决方案1】：

为了让它工作，我决定让它变得简单，只获取图像，所以就在关闭“body”元素之前我放了这个：

<div style="display:none;">

    <img src="/static/CSS/images/1.png"  alt=""   height="1" width="1">
    <img src="/static/CSS/images/2.png"  alt=""   height="1" width="1">
    <img src="/static/CSS/images/3.png"  alt=""   height="1" width="1">

</div>

因此，图像将被预取并可供将来使用。

重要提示：您可能有一些图片位于页面顶部，例如标志，顶部的大图像。为了获得更好的用户体验，重要的是用户将尽可能快地看到而不会出现不必要的延迟。但是，由于您可以在 CSS 中设置徽标图像，所以会发生 1.png 2.png 和 3.png 将首先下载，然后才会下载您的徽标和顶部图像。

这是一种糟糕的用户体验，因为当他打开您的网页时，会延迟到 1.png 2.png 3.png 被下载，然后才会下载您的徽标和顶部图像。（对了，你可以用this tool查看图片下载的顺序）

为了防止这种延迟，您可以强制您的浏览器立即开始下载您想要在页面顶部的图像（而不是等到它收到来自 CSS 的命令来下载这些图像）。

<div style="display:none;">
    <img src="/static/CSS/images/logo.png"       alt=""   height="1" width="1">   <==
    <img src="/static/CSS/images/top_image.png"  alt=""   height="1" width="1">   <==

    <img src="/static/CSS/images/1.png"  alt=""   height="1" width="1">
    <img src="/static/CSS/images/2.png"  alt=""   height="1" width="1">
    <img src="/static/CSS/images/3.png"  alt=""   height="1" width="1">

</div>

【讨论】：