巧妙地加载1000张图片 [英] Load 1000 images smartly
问题描述
我在同一页面上有1000张图片。不幸的是，我不能在它们上使用精灵，因为图像的数量不断增加。因此，您可以想象它会发送1000个HTTP请求，因此需要花费大量时间来加载图像，这对访问者来说并不是很好的体验。
I have like 1000 images on the same page. Unfortunately, I can't use sprites on them, as the number of images increases continuously. So you can imagine it sends 1000 HTTP requests, so it takes lots of time for the images to load plus it's not good experience for the visitors.
我见过其中一个名为 Lazy Load 的脚本，但我在想是否有 更智能的方式 加载图片（关于搜索引擎优化，更快地加载图片并有利于用户体验。）
I have seen one of the scripts named as Lazy Load, but I was thinking if there is a smarter way of loading images (good regarding SEO, loads images faster and is good for user experience).
有没有办法以更好的方式加载图像？
Is there a way out to load images in a better way?
详细说明：
我必须在同一页面上加载所有1000张图片，没有其他办法出。它会是什么样的或者我将要用它做什么，我实际上已经为你做了测试页 http://bloghutsbeta.blogspot.com/2012/03/testing-2_04.html 。
I have to load all 1000 images on the same page, there is no other way out. What is it going to be like or for what am I going to use it for, I have actually made a test page for you at http://bloghutsbeta.blogspot.com/2012/03/testing-2_04.html.
如您所见，我正在使用Jacek Galanciak制作的 jQuery Quicksand 插件。我与这个插件没有很好的关系，就好像我要添加jQuery或脚本一样。它会要求一个回调函数，这对我来说是一个盲点。 （这就是我为它制作一个CSS工具提示的原因：D）
As you can see, I am using the jQuery Quicksand plugin made by Jacek Galanciak. I don't have good relations with this plugin as if I am going to add jQuery or a script to it. It will ask for a callback function which is a blind spot for me. (That's why I made a CSS tooltip for it :D)
我的测试页面中有很多图片但不是1000.当它们是1000时，它将是一个一塌糊涂。所以我不知道在这种情况下如何处理1000张图像。 （顺便感谢所有人对于所有可爱的评论）
I have many pictures in my test page but not 1000. When they will be 1000, it will be a mess. So I don't know how to deal with 1000 images in this case. (By the way THANKS TO YOU ALL FOR LOVELY COMMENTS)
推荐答案
很少有用例支持在数百或数千个图像上提供服务单页。一个这样的案例是Google Images。这是怎么做的：
Very few use cases support serving hundreds or thousands of images on a single page. One such case is Google Images. This is how to do it right:
https://www.google.com/search?tbm=isch&q=jeff+atwood
-
延迟加载图片这是一项要求。如果图像低于折叠（在可见文档区域之外），则没有理由加载它们。
Lazy load images This is a requirement. If the images are below the fold (outside the visible document area) there's no reason to load them.
使用分页 Google图像将结果分解为当时仅加载少量图像的页面。谷歌还使用一些JavaScript-fu来实现无限滚动 - 一旦浏览器接近当前结果的底部，它就会发送一个请求来加载更多的结果页面并将它们注入到底部页。
Use pagination Google Images breaks up results into pages where only a handful of images are loaded at the time. Google also uses some JavaScript-fu to implement an infinite scroll - once the browser gets close to the bottom of the current results, it sends a request to load more result pages and injects them at the bottom of the page.
搜索引擎优化：没有JavaScript，没有问题再次访问Google图片链接，但关闭了JavaScript。您仍然可以浏览结果页面 - 每页大约有15个图像。搜索引擎可以索引此图像内容。
SEO: No JavaScript, No Problem Visit the Google Images link again, but with JavaScript turned off. You can still browse through the results pages - there's about 15 images per page. Search engines can index this image content.
最大图像显示一旦显示超过150张图像，请在页面底部添加一个按钮以加载更多结果 - 此按钮重新加载整个页面，但从第151个图像而不是第1个图像开始。浏览器必须绘制的每个图像占用更多内存和CPU周期。滚动长列表可以快速将移动浏览器或适度桌面抓取。
Maximum Image Display Once more than 150+ images are being displayed put a button at the bottom of the page to "Load More Results" - this button reloads the entire page, but starts at the 151st image instead of the 1st. Every image the browser has to draw takes up more memory & CPU cycles. Scrolling a long list can quickly bring a mobile browser or modest desktop to crawl.
加载数千张图片很糟糕 - 它会使您的服务器受到损害，从而破坏用户体验。对于用户想要浏览的任何大型数据集都是如此。
Loading thousands of images is bad - it will tax your server to ruing the user experience. This is true of any large data set that a user wants to browse.
这篇关于巧妙地加载1000张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
