Question

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

我遇到了this solution，但它是手动编码图像名称，但我的图像是动态加载的。还有其他方法吗？

Answer 1

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

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

这实际上将使用所需的数组调用预加载函数。

Answer 2

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

$("#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 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)

在jQuery库中预加载图像

4 个答案: