加载大图库的最佳实践

时间:2011-09-20 06:41:59

标签: jquery ajax performance load

我有一个130个图像的意外大型图库。最初,我的方法是在$(window).load();

上淡入画廊

显然这对130个文件来说是可笑的..实际上,无论如何,没有人愿意处理那么多的http请求。

这是我的“可能被关闭的主观问题。”

我不情愿地想,也许我应该只加载20张左右的图像,然后在用户进入图库时更多地加载ajax-in。但这是一个未知的,可怕的声音。

感谢您的建议!

4 个答案:

答案 0 :(得分:1)

最初加载一些图像,然后将预加载器用于其他图像..

常见的jquery画廊这样做是为了寻找画廊: http://www.twospy.com/galleriffic/

如果您想手动构建解决方案,可以使用预加载器: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

答案 1 :(得分:0)

最好只根据用户的要求加载我的年龄,或者只显示10-20,一次只能在页面的某处显示“查看更多”或“下一页”链接。另一种方法是在用户向下滚动页面时加载图像!使用scroll()方法,在此处记录:http://api.jquery.com/scroll/

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

答案 2 :(得分:0)

绝对最好的方法就是你在写,只加载一些图像,然后加载其余图像。

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

答案 3 :(得分:0)

这是一个主观问题,但是,基本的答案是在页面加载后加载图像,这样就不会阻止页面。

您还应该使用缩略图。我见过很多自制的画廊,只是将原始图片压缩到加载的缩略图...这不好看;)如果你不想去下一个/ prev-page路线,你可以加载缩略图在5/6/7-by-infinite网格中,仅在可见占位符中加载图片。

  1. 加载页面
  2. 为每张图片创建占位符
  3. 为可见占位符加载图片
  4. 当用户向下滚动页面时,为进入视口的占位符加载图片。
  5. 或某事;)