jquery - 如何在后台预加载图像

Question

使用 ajax，我得到了一组图像 url，创建ul列表并将其添加到页面中。之后，我打开 Photoswipe 滑块来显示这些图像。手机（ipod、htc）出现问题：图片没有时间加载。有没有办法在打开滑块之前将所有图像加载到临时位置？

Answer 1

您可以在页面加载时创建 Image 对象，这将导致图像从远程服务器检索并存储在浏览器缓存中而不显示在页面上。当您<img>在页面上包含引用相同远程图像的元素时，它将从浏览器缓存中提供并或多或少地立即显示：

new Image().src = 'http://myserver.com/myimage.jpg';
...
<img src="http://myserver.com/myimage.jpg" />

无需保存对Image对象的引用，只需按所示分配src属性就足以让浏览器缓存它们。