智能地加载1000张图片

Question

我有大约1000张图片在同一个页面上。不幸的是，由于图片数量不断增加，我无法使用精灵图。所以你可以想象它会发送1000个HTTP请求，这需要很长时间才能加载图片，对访问者来说也不是很好的体验。

我看到了一个名为“懒加载”的脚本，但我在想是否有更聪明的方式来加载图片（良好的SEO效果，更快地加载图片，并且对用户体验友好）。

有没有更好的方法来加载图片？

详细说明：

我必须在同一页上加载所有1000张图片，没有其他出路。我已经为您做了一个测试页面，请访问http://bloghutsbeta.blogspot.com/2012/03/testing-2_04.html。

正如您所看到的，我正在使用Jacek Galanciak制作的jQuery Quicksand插件。如果我要向其中添加jQuery或脚本，我与此插件没有良好的关系。它将要求一个回调函数，这对我来说是一个盲点。（这就是为什么我为它制作了CSS工具提示:D）

我的测试页面中有许多图片，但不到1000张。当它们达到1000张时，会变得一团糟。所以我不知道如何处理这种情况下的1000张图片。（顺便说一句，感谢大家可爱的评论）

- CryOfFaclon

---

单个页面上不要放太多的图片。 - Quentin

不确定为什么以及如何让这些图像出现。在您开始探索解决方案之前，您可能需要考虑用户交互。 - Spoike

在单个页面加载1000张图片不是一个“聪明”的选择。 - Joseph

我的初步想法是，如果你正在加载1000张图片，那么没有什么真正的方法可以缓解这种痛苦。它会很痛苦。话虽如此，也许如果你解释一下这1000张图片的用途，可能会有某种解决方案。 - izb

@DanNeely 嗯，我已经尽力了，将 px 保持在 90 x 90，并且图像大小保持在约 4KB 左右，但仍然意味着需要 4MB，这对我来说是一个令人震惊的消息。 - CryOfFaclon

Answer 1

很少有用例支持在单个页面上展示数百或数千张图片。谷歌图片就是这样一个用例。以下是正确实现该功能的方法:

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

1. 延迟加载图片 这是必须的。如果图片在折叠区域（可见文档区域之外），则没有加载它们的理由。

2. 使用分页 谷歌图片将结果分成多页，每次只加载少量图片。谷歌还使用一些 JavaScript 技巧来实现“无限滚动”——一旦浏览器接近当前结果的底部，它会发送请求以加载更多结果页面，并将它们注入到页面底部。

3. SEO: 不需要JavaScript也可以 再次访问谷歌图片链接，但关闭 JavaScript。您仍然可以浏览结果页面 - 每页大约有15张图片。搜索引擎可以索引此图像内容。

4. 最大图像显示 当展示超过150张图片时，在页面底部放置一个“加载更多结果”的按钮，该按钮重新加载整个页面，但从第151张图片开始加载。浏览器必须绘制的每个图像都会占用更多的内存和 CPU 周期。滚动一个长列表可能会迅速使移动浏览器或普通台式机变慢。

加载数千张图片是不好的——它将给服务器带来负担，影响用户体验。这对于任何用户想要浏览的大型数据集都是正确的。

- leepowers

---

我应该使用无限滚动脚本还是狱 Script？因为我不知道在这种情况下哪一个更适合我，而用户有可能会向下滚动。 - CryOfFaclon

对于您的情况，我会使用延迟加载+分页。每页限制图像数量，并且仅当它们在视图区域内时才加载它们。稍后可以添加无限滚动-因为无限滚动本质上是自动分页（一旦用户接近当前结果页面的末尾，就会加载下几页结果）。 - leepowers

Answer 2

我能想到的最好答案是： 不要这样做。不要在一个网站上加载1000张图像，而应该使用某种懒加载或分页方式。

尽管如此，有一个想法，不确定是否合适，因为你从未给出具体的用例：每隔X分钟运行一个cron任务，将图像拼接成一个/一些更大的图像。将更大的图像作为您使用sprite解决方案的方式使用。

- cypherabe

Answer 3

几年前，我想是在2010年，新加坡国庆庆典网站首页有多张图片，大约20 x 20张。每天在高峰期间，数据库（MySQL）和Web服务器（Apache）都会崩溃。

开发团队随后部署了memcached来解决这个问题。

- OCB

---

当然，那会解决服务器端的问题。客户端方面怎么办呢？不仅需要很长时间，还会卡死浏览器。 - Joseph

Answer 4

使用延迟加载在用户滚动页面时渲染这些图像，即动态设置一组图像的加载。

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

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

- Satish N Ramteare

---

这个问题明确表示它正在寻找比惰性加载更“智能”的东西。 - Quentin

我觉得开发人员不理解延迟加载的概念，因为这是一种非常聪明的方式来显示如此庞大的图像列表 ;) - Satish N Ramteare

Answer 5

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

或者像其他答案中那样，在滚动时加载它们。

- Deadlykipper