减少1000张图像的HTTP请求？

Question

我知道这个问题听起来可能有点疯狂，但是我很难想出一个明智的主意：

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

图像大小约为5-10 kb。

有没有办法将所有图像加载到一个请求中？以某种方式将所有图像划入一个文件中…

还是您对该主题还有其他建议？

我已经知道的其他选项：

CSS精灵

懒负荷

设置到期的标题

通过不同的主机名下载图像

Answer 1

考虑到您的情况，我只能想到另外两个选择：

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

我认为您最好的选择是懒惰加载，带有到期标头的缓存以及从多个主机名中提供图像的组合。

如果图像可以通过逻辑分组，则CSS Sprites除了上述所有内容外，还可以对您有用。例如，如果您的缩略图是在特定一天上传的图像……您可能可以为每天创建一个文件，然后可以在用户浏览器上缓存。

Answer 2

这是通过使用所谓的CSS精灵来完成的；其中包含所有其他图像的单个图像，其中特定部分是由CSS选择的HTML中所需的。

在 http://css-tricks.com/css-sprites

Answer 3

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

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

Answer 4

你可以尝试 剪辑 ImageMagick的命令创建一个图像。