Cry*_*lon 14 javascript jquery image loading
我在同一页面上有1000张图片.不幸的是,我不能在它们上使用精灵,因为图像的数量不断增加.因此,您可以想象它会发送1000个HTTP请求,因此需要花费大量时间来加载图像,这对访问者来说并不是很好的体验.
我看过其中一个名为Lazy Load的脚本,但我在想是否有更聪明的方式加载图像(关于SEO的好处,加载图像更快,对用户体验有好处).
有没有办法以更好的方式加载图像？
详细说明:
我必须在同一页面上加载所有1000张图片,没有别的出路.它会是什么样的或者我将要用它做什么,我实际上已经在http://bloghutsbeta.blogspot.com/2012/03/testing-2_04.html 上为你做了一个测试页面.
如您所见,我使用的是Jacek Galanciak制作的jQuery Quicksand插件.我与这个插件没有很好的关系,好像我要添加jQuery或脚本.它会要求一个回调函数,这对我来说是一个盲点.(这就是我为它制作CSS工具提示的原因:D)
我的测试页面上有很多图片但不是1000张.当它们是1000时,它会很乱.所以我不知道在这种情况下如何处理1000张图像.(顺便感谢你们所有人的可爱评论)
lee*_*ers 20
很少有用例支持在单个页面上提供数百或数千个图像.一个这样的案例是Google Images.这是怎么做的:
https://www.google.com/search?tbm=isch&q=jeff+atwood
延迟加载图像这是一项要求.如果图像位于折叠下方(可见文档区域外),则没有理由加载它们.
使用分页 Google图像会将结果分解为当时只加载少量图像的页面.谷歌还使用一些JavaScript-fu来实现无限滚动 - 一旦浏览器接近当前结果的底部,它就会发送一个请求来加载更多结果页面并将其注入页面底部.
搜索引擎优化:没有JavaScript,没有问题再次访问谷歌图片链接,但关闭了JavaScript.您仍然可以浏览结果页面 - 每页大约有15个图像.搜索引擎可以索引此图像内容.
最大图像显示一旦显示超过150个图像,在页面底部放置一个按钮以"加载更多结果" - 此按钮重新加载整个页面,但从第151个图像而不是第1个图像开始.浏览器必须绘制的每个图像占用更多的内存和CPU周期.滚动长列表可以快速使移动浏览器或适度桌面爬行.
加载数千张图片很糟糕 - 它会对您的服务器造成负担,从而破坏用户体验.对于用户想要浏览的任何大型数据集都是如此.