Question

我有一个网页，当点击同一页面上的不同链接时，会显示不同的图像。图像质量非常高，需要花费大量时间才能加载，我希望将图像下载并保存在缓存中，然后加载到链接的onclick事件中。

Answer 1

只需将它们全部加载为隐藏图像即可。

CSS：

.hidden {
    display:none;
}

HTML：

<img src="/hugeImage.jpg" class="hidden" />
<img src="/hugeImage2.jpg" class="hidden" />
<img src="/hugeImage3.jpg" class="hidden" />
<img src="/hugeImage4.jpg" class="hidden" />

您可以使用JavaScript轻松模拟这一点，在DOMContentLoaded事件之后将每个图像添加到DOM中 - 同样的逻辑适用。

var img = document.createElement('img');
img.setAttribute('src', '/hugeImage.jpg');
img.setAttribute('class','hidden');
document.body.appendChild(img);

Answer 2

请参阅我之前的答案，了解如何预先缓存图像：Is there a way to load images to user's cache asynchronously?。

加载这些内容后，单击显示它们几乎是即时的，因为它们将来自浏览器的缓存（内存或磁盘缓存）。

Answer 3

由于您希望您的用户在您的网站上获得良好的体验（而且他们没有得到“缓慢”的印象），您应该异步加载图片，但只能在当前页面加载后（这很重要，因为您希望快速加载当前页面。

这样你的当前页面就像以前一样加载，你也可以利用预加载图像。

在这里查看如何加载图像异步（确保将其包装在document.ready或类似的东西中，如果你不使用jQuery）：

Is there a way to load images to user's cache asynchronously?

如何强制浏览器下载和缓存当前未在页面上显示的图像

3 个答案: