我有一个网页，其中显示不同的图像时，同一页上的不同链接被点击。图片的质量非常高，他们需要很多时间来加载，我希望图片被下载并保存在缓存中，然后加载到onclick事件的链接。
只需将它们全部加载为隐藏图像。
CSS:.hidden {
display:none;
}
<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);
请参阅我之前关于如何预缓存图像的回答:是否有一种方法可以将图像异步加载到用户's缓存中?
一旦这些被加载，点击时显示它们将几乎是瞬间的，因为它们将来自浏览器的缓存(内存或磁盘缓存)。
既然你想让你的用户在你的网站上有一个良好的体验(他们不会得到"缓慢"的印象)，你应该异步加载图像，但只有在当前页面加载之后(这很重要，因为你想让当前页面加载得很快)。
这样你的当前页面就可以在相同的时间加载，你也可以利用预加载图像的优势。
查看这里如何异步加载图像(确保将其包装在文档中)。如果你不使用jQuery，可以使用ready或类似的东西):
是否有一种方法可以异步加载图像到用户的缓存?