我知道这个问题可能听起来有点疯狂，但我坚持认为也许有人能想出一个聪明的主意：
假设您在一个 HTML 页面上有 1000 个缩略图。
图像大小约为 5-10 kb。
有没有办法在一个请求中加载所有图像？以某种方式将所有图像压缩到一个文件中……</p>
或者你对这个主题有什么其他建议吗？
我已经知道的其他选项：
CSS 精灵
延迟加载
设置过期标头
跨不同主机名下载图像
问问题
6185 次
4 回答
6
鉴于您的情况，我只能想到另外两个选择：
- 使用“data:”协议并将缩略图的 base64 编码版本直接回显到 HTML 页面中。我不建议这样做，因为您无法在用户浏览器上缓存这些图像。
- 使用 HTML5 的 Web 存储将所有图像存储为记录，并将 base64 编码的图像数据存储为列中的 BLOB。数据库下载到用户机器后，使用 Javascript 循环遍历所有记录并使用 jQuery 等动态创建页面上的缩略图。使用此选项，您需要等到整个数据库在最终用户浏览器上完成下载，他们将需要一个相当现代的浏览器。
我认为您最好的选择是结合延迟加载、使用过期标头进行缓存以及提供来自多个主机名的图像。
如果图像可以按逻辑分组，那么除了上述所有内容之外，CSS sprites 也可能对您有用。例如，如果您的缩略图是针对某一天上传的图像...您可以为每一天创建一个文件，然后将其缓存在用户浏览器上。
于 2010-12-28T05:09:55.630 回答
2
这是通过使用所谓的 CSS sprite 来完成的。包含所有其他图像的单个图像，其中包含 css 选择的 html 中所需的特定部分。
于 2010-12-28T05:13:40.523 回答
0
听起来您想要 SPDY 的server push之类的东西。当客户端请求 HTML 页面（或第一张图片）时，SPDY 允许服务器推送其他资源，而无需等待更多请求。
当然，这仍然是实验性的。
于 2010-12-28T05:00:28.533 回答
0
您可以尝试使用 imagemagick 的montage命令来创建单个图像。
于 2010-12-28T05:07:27.480 回答