巧妙地加载1000张图片

Question

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

Answer 1

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

https://www.google.com/search?tbm=isch&q=jeff+atwood

1. 延迟加载图片这是一项要求。如果图像低于折叠（在可见文档区域之外），则没有理由加载它们。

2. 使用分页 Google图片会将结果分解为当时只加载少量图片的页面。谷歌还使用一些JavaScript-fu来实现无限滚动 - 一旦浏览器接近当前结果的底部，它就会发送一个请求来加载更多的结果页并将它们注入到底部页。

3. 搜索引擎优化：没有JavaScript，没有问题再次访问Google图片链接，但关闭了JavaScript。您仍然可以浏览结果页面 - 每页大约有15个图像。搜索引擎可以索引此图像内容。

4. 最大图像显示一旦显示超过150张图像，请在页面底部添加一个按钮以“加载更多结果” - 此按钮会重新加载整个页面，但会启动在第151个图像而不是第1个。浏览器必须绘制的每个图像占用更多内存和CPU周期。滚动长列表可以快速使移动浏览器或适度桌面爬行。

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

Answer 2

我能想到的最佳答案：

不要这样做。不要在一个网站上加载1000张图片，确实使用某种延迟加载或分页。

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

Answer 3

几年前，我认为2010年，Singapore National Day parade网站首页有多张图片，例如20张20张。在高峰时段，数据库（MySQL）和Web服务器（Apache）每天都会出现故障。

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

Answer 4

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

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

此N可根据图像文件大小或尺寸而变化。

Answer 5

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

或者在其他答案中执行，并在向下滚动时加载它们。