【问题标题】:How to preload images in background如何在后台预加载图像
【发布时间】:2012-09-06 07:51:51
【问题描述】:

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

【问题讨论】:

标签: jquery photoswipe


【解决方案1】:

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

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

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

【讨论】:

  • 您不需要将 Image 对象保存到数组中,只需创建它们以便检索文件然后忘记它们
  • 在加载所有图像后,是否有某种方法可以跟踪此操作并执行一些操作(在我的情况下为加载滑块)?
  • 您可以为图像对象分配一个“onload”处理程序,该处理程序将在检索图像时运行,例如 var img = new Image(); img.src = '废话'; img.onload = function(){...}
  • 在控制台中发现 ReferenceError: invalid assignment left-hand
  • 代替“new load_image.src ='index.php?...”试试“new Image().src ='index.php?...”
猜你喜欢
  • 1970-01-01
  • 2017-01-03
  • 2015-06-18
  • 1970-01-01
  • 2018-12-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-07-11
相关资源
最近更新 更多