0

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

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

先感谢您！

4

2 回答 2

1

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

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

例如，你在轮播中的所有下一张图片都应该是这样的

<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">
于 2011-07-16T20:20:20.607 回答
0

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

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

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

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

于 2011-07-16T20:26:21.773 回答