image - 减少 1000 张图片的 HTTP 请求？

Question

我知道这个问题听起来有点疯狂，但我认为也许有人会想出一个聪明的主意:

假设您在一个 HTML 页面上有 1000 个缩略图。

图像大小约为 5-10 kb。

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

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

我已经知道的其他选项:

CSS Sprite

延迟加载

设置过期 header

跨不同主机名下载图像

Answer 1

鉴于您的情况，我只能想到另外两种选择:

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

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

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