javascript - 智能加载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 张图像。（顺便感谢大家的可爱评论）

score 20 · Accepted Answer

很少有用例支持在单个页面上提供数百或数千张图像。一个这样的例子是谷歌图片。这是正确的做法：

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

加载数以千计的图像是不好的——它会给你的服务器带来负担，从而破坏用户体验。对于用户想要浏览的任何大型数据集都是如此。

score 1 · Accepted Answer

我能想到的最佳答案：

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

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

score 0 · Accepted Answer

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

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

这个 N 可以根据图像文件的大小或尺寸而变化。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

几年前，我想是 2010 年，新加坡国庆游行网站的首页有多张图片，比如 20 x 20。每天在高峰时段，数据库 (MySQL) 和 Web 服务器 (Apache) 都会出现故障。

开发团队随后部署memcached以解决该问题。

5 回答 5