减少1000张图片的HTTP请求？

Question

我知道这个问题可能听起来有点疯狂，但我坚信也许有人能想出一个聪明的主意：

想象一下，您在单个 HTML 页面上有 1000 个缩略图。

图像大小约为5-10 kb。

有没有办法在单个请求中加载所有图像？以某种方式将所有图像压缩到一个文件中......

或者您对此主题还有其他建议吗？

我已经知道的其他选项：

CSS sprites

延迟加载

设置过期标头

跨不同主机名下载图像

Answer 1

鉴于您的情况，我只能想到两个其他选项：

1. 使用“data：”协议并将缩略图的 base64 编码版本直接回显到 HTML 页面中。我不建议这样做，因为您无法在用户浏览器上缓存这些图像。
2. 使用 HTML5 的 Web 存储将所有图像存储为记录，并将 base64 编码的图像数据存储为列中的 BLOB。将数据库下载到用户计算机后，使用 Javascript 循环遍历所有记录，并使用 jQuery 等动态在页面上创建缩略图。使用此选项，您需要等到整个数据库在最终用户浏览器上下载完成，并且他们将需要一个相当现代的浏览器。

我认为最好的选择是延迟加载、使用过期标头进行缓存以及从多个主机名提供图像的组合。

如果图像可以按逻辑分组，那么除了上述所有内容之外，CSS 精灵也可能适合您。例如，如果您的缩略图是在某一天上传的图像...您可以为每天创建一个文件，然后将其缓存在用户浏览器上。

Answer 2

这是通过使用所谓的 CSS sprite 来完成的；包含所有其他图像的单个图像，以及 css 选择的 html 中所需的特定部分。

请参阅 http://css-tricks.com/css-sprites 上的教程

Answer 3

听起来你想要像 SPDY 的 服务器推。当客户端请求 HTML 页面（或第一个图像）时，SPDY 允许服务器推送其他资源，而无需等待更多请求。

当然，这仍然是实验性的。

Answer 4

您可以尝试使用 imagemagick 的 montage 命令来创建单个图像。