加载大型图片库的最佳实践答案

【问题标题】：best practice for loading large image gallery加载大型图片库的最佳实践
【发布时间】：2011-09-20 06:41:59
【问题描述】：

我有一个包含 130 张图片的超大画廊。最初，我的做法是在$(window).load();的画廊中淡入淡出

显然，这对于 130 个文件来说是可笑的。实际上，没有人愿意处理这么多的 http 请求。

这就是我的“可能会结束的主观问题”。

我很不情愿地想，也许我应该只加载 20 张左右的图像，然后随着用户在图库中的进展增加 ajax-in。但这听起来是未知的和可怕的。

感谢您的建议！

【问题讨论】：

【解决方案1】：

首先加载一些图像，然后将预加载器用于其他图像..

Common jquery gallery 这样做是为了寻找 Gallerific： http://www.twospy.com/galleriffic/

【讨论】：

【解决方案2】：

最好只在用户需要时加载 I 年龄，一次只显示 10 到 20 岁，并在页面某处带有“查看更多”或“下一页”链接。另一种方法是在用户向下滚动页面时加载图像！使用 scroll() 方法，记录在这里：http://api.jquery.com/scroll/

我会使用单独的页面，当用户单击不同的链接时，您可以使用 jQuery 加载下一组图像。

【讨论】：

【解决方案3】：

当然，最好的方法是如您所写，仅加载部分图像，然后加载其余图像。

我的建议是只加载 3-5 张图片，并为“下一步”按钮添加事件以加载更多图片。找到 jquery.lazyload.js 并尝试集成到您的页面中。

【讨论】：

【解决方案4】：

这是一个主观问题，但基本答案是在页面加载后加载图像，因此您不会阻止页面。

您还应该使用缩略图。我见过很多自制的画廊，它们只是在加载时将原始图片压缩成缩略图......这不太好;）如果你不想去下一页/上一页路线，你可以只加载缩略图在一个 5/6/7-by-infinite 网格中，并且只加载可见占位符中的图片。

或者什么;)

【讨论】：