jCarousel 带缩略图的图片库

发布于 2024-11-25 01:19:53 字数 243 浏览 1 评论 0原文

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

  • 我应该先加载图像和缩略图,然后根据请求加载图像吗?

先感谢您!

I currently have an image gallery with 30 - 40 images. Upon page load the user can visually see the images loading for a pretty significant amount of time (less than pretty). The gallery is using jcarousel prev / next buttons to navigate to images as well as thumbnails. I am looking for ways to optimize the way the gallery loads or at least the look of how the gallery is loading. One thought I had is below but wanted to know what the Stack Overflow community thoughts were on best way to address this.

  • Should I load first image and thumbnails, then images upon request?

Thank you in advance!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

Smile简单爱 2024-12-02 01:19:53

我们在我们的网站上实施了以下操作。

  1. 当您构建轮播时,不要使用图像构建具有 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">

We implemented this in our website do the following thing.

  1. When you construct the carousel , don't construct all the images with src value with images
  2. For the first four or five images have the images for src attributes
  3. for the next all images store the image valvue in some custom value and give src as some other dummy value
  4. Once you click next in the carouse swap the values of src and your custom variables
  5. for loading you can show a default loading symbol
  6. You can improve performance way better with this approach

for example all your next images in your carouse should look something like this

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

once you click swap the image src

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

after that your code should look as below

<img height="0px" width="0px" border="0" alt="Hidden Depths" title="Hidden Depths" src="yourimage.jpg" class="carouselImage">
穿越时光隧道 2024-12-02 01:19:53

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

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

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

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

Yes, lazy-loading of images is very neat technique to improve performance. You should show some of them (depending of size). Then jCarousel has a way of loading dynamically the rest of images:

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

You can define that callback to load new images via JavaScript or via AJAX.
See examples: http://sorgalla.com/projects/jcarousel/#Examples

Also I know this plugin http://www.appelsiini.net/projects/lazyload that lazy-loads the images when scrolling, playing with the src attributes, as kobe suggested. It doesn't fit directly to your case, but the source code will give you a better idea of implementing it.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文