jCarousel 带有缩略图的图片库答案

【问题标题】：jCarousel Image gallery with thumbnailsjCarousel 带有缩略图的图片库
【发布时间】：2011-07-16 20:07:21
【问题描述】：

我目前有一个包含 30 到 40 张图片的图片库。页面加载后，用户可以在相当长的时间内直观地看到加载的图像（不太漂亮）。画廊使用 jcarousel 上一个/下一个按钮来导航到图像和缩略图。我正在寻找优化画廊加载方式的方法，或者至少是画廊加载方式的外观。下面是我的一个想法，但想知道 Stack Overflow 社区对解决此问题的最佳方法有何看法。

我应该先加载图片和缩略图，然后再根据要求加载图片吗？

提前谢谢你！

【问题讨论】：

标签： jquery ajax image lazy-loading load-time

【解决方案1】：

我们在我们的网站上实现了这一点，做以下事情。

在构建轮播时，不要将所有src值的图片都用images构建
对于前四五张图片有图片的src属性
对于接下来的所有图像，将图像值存储在某个自定义值中，并将 src 作为其他一些虚拟值提供
在轮播中单击下一步后，交换 src 的值和您的自定义变量
对于加载，您可以显示默认加载符号
您可以使用这种方法更好地提高性能

例如，轮播中的所有下一个图像都应该是这样的

<img height="0px" width="0px" border="0" alt="Hidden Depths" title="Hidden Depths" id="yourimage.jpg" class="carouselImage">

点击后交换图片源

 $('yourimage').attr('src','yourimage');

之后您的代码应如下所示

<img height="0px" width="0px" border="0" alt="Hidden Depths" title="Hidden Depths" src="yourimage.jpg" class="carouselImage">

【讨论】：

您能否为此提供示例 js fiddle？提前致谢。

【解决方案2】：

是的，图像延迟加载是一种非常巧妙的提高性能的技术。您应该展示其中的一些（取决于大小）。然后 jCarousel 有一种动态加载其余图像的方法：

jQuery('#mycarousel').jcarousel({
    itemLoadCallback: mycarousel_itemLoadCallback
});

您可以定义该回调以通过 JavaScript 或 AJAX 加载新图像。查看示例：http://sorgalla.com/projects/jcarousel/#Examples

我也知道这个插件http://www.appelsiini.net/projects/lazyload 在滚动时延迟加载图像，使用 src 属性，正如 kobe 建议的那样。它并不直接适合您的情况，但源代码会让您更好地了解实现它。

【讨论】：