Question

我使用的是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查看缓存内容。似乎图像没有缓存。

我该如何解决？

Answer 1

为了使它工作，我决定简化并只是获取图像，所以就在关闭之前＆＃34; body＆＃34;我已经把这个：

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

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

重要提示：您可能会在页面顶部放置一些图片，例如徽标，顶部的大img。为了获得更好的用户体验，用户必须尽可能快地查看而不会出现不必要的延迟。但是，由于您可以在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>

如何预取图片？

1 个答案: