减少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精灵来完成的;包含其中所有其他图像的单个图像，以及由css选择的html中所需的特定部分。

请参阅http://css-tricks.com/css-sprites

上的一个教程

Answer 3

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

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

Answer 4

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