Question

我目前有一个包含30 - 40张图片的图片库。在页面加载时，用户可以在视觉上看到图像加载相当长的时间（少于漂亮）。该画廊使用jcarousel prev / next按钮导航到图像和缩略图。我正在寻找优化画廊加载方式的方法，或者至少是画廊加载方式的外观。我有一个想法，但想知道Stack Overflow社区的想法是什么，以解决这个问题。

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

提前谢谢！

Answer 1

我们在网站上实现了以下内容。

构建轮播时，不要使用带有图像的src值构建所有图像
前四或五个图像具有src属性的图像
对于下一个所有图像将图像valvue存储在某个自定义值中，并将src作为其他虚拟值
在carouse中单击next后，交换src和自定义变量的值
用于加载您可以显示默认加载符号
您可以使用此方法更好地改善效果

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

单击交换图像src

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

之后，您的代码应如下所示

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

Answer 2

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

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

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

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

jCarousel带有缩略图的图库

2 个答案: