减少1000个图像的HTTP请求?

Hak*_*kan 7 reduce image http request

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

想象一下,您在一个HTML页面上有1000个缩略图.

图像大小约为5-10 kb.

有没有办法在单个请求中加载所有图像?不知何故将所有图像压缩成一个文件......

或者您对该主题有任何其他建议吗?

我已经知道的其他选择:

CSS sprites

懒加载

设置过期标头

下载不同主机名的图像

Joh*_*ich 5

鉴于您的情况,我只能考虑其他两个选项:

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

我认为你最好的选择是延迟加载,缓存过期标题和提供来自多个主机名的图像.

如果图像可以按逻辑分组,除了上面的所有内容之外,CSS sprites也可能适用于您.例如,如果您的缩略图用于某一天上传的图像...您可以为每天创建一个文件,然后可以在用户浏览器上缓存.