如何在后台预加载图像

Question

使用ajax我得到一个图像网址数组，创建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属性就足以让浏览器缓存它们。