在jQuery库中预加载图像

我想在我的网站上使用这个库 。 唯一的问题是当点击下一个加载图片时，需要花费很多时间。 当用户点击图片放大时，我想预先加载下两张图片。

我遇到了这个解决方案，但它是手动编码图像名称，但我的图像是动态加载的。 还有其他办法吗？

Answer 1

这是一个简单的解决方案。 您可以向拇指添加单击事件，以便在单击时单击它预加载接下来的三个图像。 一旦你在单独的图像导航中预加载下一个图像的某种方式仍然需要解决，但希望这将使你到达那里..

$("#content img").on("click",function(){ // use .live instead if you are using an older version of jQuery var next = $(this).next(); for (var i = 0; i < 3; i++) { var img = new Image(); img.src = next.attr("alt"); next = next.next(); } }); 

Answer 2

您可以使用您提到的解决方案，只需要提取图库图像的src属性：

 preload($('#gallery-images img').map(function() { return this.src; })); 

这实际上将使用所需的数组调用preload函数。

Answer 3

我建议使用这个画廊 – http://dimsemenov.com/plugins/royal-slider/gallery/它完全符合您的需要 – 预加载附近的图像，您可以设置预加载多少。 但请注意，它是商业的，成本约为10美元。

Answer 4

如果您的图像存储在mysql中，您可以使用您在一些修改中找到的解决方案，从图像名称的sql查询中添加json编码。 将信息传递到jQuery以进行预加载

  require_once('JSON.php'); $json = new Services_JSON(); $out = $json->encode($query)