巧妙地加载1000张图片

我在同一页面上有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张图像。（顺便感谢你所有人的可爱评论）

很少有用例支持在单个页面上提供数百或数千个图像。一个这样的案例是Google Images。这是怎么做的：

延迟加载图像这是一项要求。如果图像位于折叠下方（可见文档区域外），则没有理由加载它们。
使用分页 Google图像会将结果分解为当时只加载少量图像的页面。 Google还使用一些JavaScript-fu来实现无限滚动 – 一旦浏览器接近当前结果的底部，它就会发送一个请求来加载更多结果页面并将其注入页面底部。
搜索引擎优化：没有JavaScript，没有问题再次访问谷歌图片链接，但关闭了JavaScript。您仍然可以浏览结果页面 – 每页大约有15个图像。搜索引擎可以索引此图像内容。
最大图像显示一旦显示超过150个图像，将页面底部的按钮设置为“加载更多结果” – 此按钮将重新加载整个页面，但从第151个图像而不是第1个图像开始。浏览器必须绘制的每个图像占用更多的内存和CPU周期。滚动长列表可以快速将移动浏览器或适度桌面抓取。

加载数千张图片很糟糕 – 它会对您的服务器造成负担，从而破坏用户体验。对于用户想要浏览的任何大型数据集都是如此。

我能想到的最佳答案：

不要这样做 。不要在一个站点上加载1000个图像，并使用某种延迟加载或分页。

然而，有一个想法，不确定它是否合适，因为你从未给出具体的用例：根据你的需要，每隔X分钟运行一个cron作业将图像拼接成一个/更大的图像。使用更大的图像，就像使用精灵解决方案一样。

几年前，我认为2010年，新加坡国庆节游行网站的头版有多张图片，比如20 x 20张。在高峰时段，数据库（MySQL）和Web服务器（Apache）每天都会出现故障。

然后开发团队部署了memcached来解决问题。

当用户动态滚动页面加载图像集时，使用延迟加载来渲染这些图像。

这是一种复杂的方法，您首先加载少量（N个）图像并检查用户是否已滚动，直到在containerNode.offsetHeight之前留下几行图像。如果用户向下滚动该限制，则为下一个要加载的n个图像创建N个图像标记。

可以基于图像文件大小或尺寸改变该N.

试试插件QueryLoader 2 。它无法帮助您更快地加载它们 – 正如您所说，数量的增加 – 但它会在元素仍在加载时显示“加载”屏幕，并可能为您提供更好的用户体验。

那个或者像其他一些答案那样做，并在向下滚动时加载它们。