加载大型图片库的最佳实践
我有一个出人意料的大图库，包含 130 张图像。最初，我的方法是在 $(window).load(); 上淡入画廊
。显然，这对于 130 个文件来说是可笑的。实际上，没有人愿意处理那么多的 http 请求。
这就是我的“可能已经结束的主观问题”。
我不情愿地想也许我应该只加载 20 个左右的图像，然后随着用户在图库中的进展而使用 ajax 输入更多图像。但这是未知的，听起来很可怕。
感谢您的建议！
I have an unexpectedly large gallery of 130 images. Originally, my approach was to fade in the gallery on $(window).load();
Clearly this is laughable at 130 files.. And really, nobody wants to deal with that many http requests anyway.
So that's my "subjective question that's likely to be closed."
I'm reluctantly thinking that maybe I should load only 20 or so images and then ajax-in more as the user progresses in the gallery. But that is uncharted and scary sounding.
Thanks for your advice!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
最初加载一些图像，然后使用预加载器加载其他图像。
常见的 jquery gallery 是否会查找画廊：
http://www.twospy.com/galleriffic/更新：https://github.com/iamvery/galleriffic
如果您想要手动构建解决方案，您可以使用预加载器：
http://engineeredweb.com/blog/09/12/预加载图像-jquery-and-javascript
Initially load a few images then use preloader for other images..
Common jquery gallery does this look for gallerific :
http://www.twospy.com/galleriffic/Updated: https://github.com/iamvery/galleriffic
If you want to build solution manually you can use preloader :
http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
最好只在用户需要时加载 I 年龄，方法是一次仅显示 10-20 个，并在页面上的某处显示“查看更多”或“下一页”链接。另一种方法是在用户向下滚动页面时加载图像！使用此处记录的scroll()方法： http://api.jquery.com/scroll/
我会使用单独的页面，当用户单击不同的链接时，您可以使用 jQuery 加载下一组图像。
It would be a good idea to only load the I ages as the user requires them, by either only showing 10-20 at a time with a "view more" or "next page" link somewhere on your page. Another way of doing it would be to load images as the user scrolls down your page! Using the scroll() method, documented here: http://api.jquery.com/scroll/
I would go with the separate pages whereby you use jQuery to load the next set of images when the user clicks the different links.
绝对最好的方法是如您所写，仅加载部分图像，然后加载其余图像。
我的建议是仅加载 3-5 张图像，并为“下一步”按钮添加事件以加载更多图像。找到 jquery.lazyload.js 并尝试集成到您的页面。
Definetly the best way is as you writed, to load only some of the images and then to load the rest.
My suggestion is to load only 3-5 images and to add event for "next" button to load more. Find the jquery.lazyload.js and try to integrate to your page.
这是一个主观问题，但是，基本答案是在页面加载后加载图像，这样您就不会阻塞页面。
您还应该使用缩略图。我见过很多自制的画廊，只是在加载时将原始图片压缩为缩略图...这不太好；）如果您不想转到下一页/上一页路线，您可以只加载缩略图在 5/6/7 无限网格中，并且仅加载可见占位符中的图片。
或者什么；）
This is a subjective question, however, the basic answer is to load images after the page has loaded, so you don't block the page.
You should also be using thumbnails. I have seen plenty of home-made galleries that just squashes the original picture down to a thumbnail on load... That's not nice ;) If you don't want to go the next/prev-page route, you could just load thumbnails in a 5/6/7-by-infinite grid, and only load pictures in visible placeholders.
Or something ;)