html - 动态 Sprite 图像在内存中生成

Question

我有一个 webApplication，它以表格形式显示用户记录(一次 200 行)。问题是这些行包含多个图像，它们是根据请求 URL 提供的。这会导致为每个图像生成一个请求，从而导致性能下降。

问题:

Is it possible to create spriteImage for dynamic images? I'm looking for something that I can use in order to aggregate these images into a single sprite at runtime without storing it into disk.

Answer 1

一种可能性是将图像生成为 Data URIs .这将包括响应中的所有图像数据，无需发出额外请求即可由浏览器显示。

即而不是您拥有的普通 HTML 页面

<img src="http://myserver.com/img/123.png"/>这将创建对服务器的请求，您可以将数据直接包含在页面中 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />

如果您对此还不满意，最后一个选择是将所有图像组合成一个巨大的图像，在屏幕外加载该图像并使用 CSS 技巧来抓取要显示的大图像的一部分。

如果所有其他方法都失败了，请获得更强大的服务器，它们没那么昂贵。