jCarousel 带缩略图的图片库
我目前有一个包含 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我们在我们的网站上实施了以下操作。
例如轮播中的所有下一个图像应该看起来像 一旦您单击
“交换图像 src”
,您的代码应如下所示
We implemented this in our website do the following thing.
for example all your next images in your carouse should look something like this
once you click swap the image src
after that your code should look as below
是的,延迟加载图像是提高性能的非常巧妙的技术。您应该展示其中一些(取决于大小)。然后 jCarousel 有一种动态加载其余图像的方法:
您可以定义该回调以通过 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:
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.