我正在开发一款需要加载大量图标的应用.目前我正在使用< img>将src设置为正确的URL的标记.这引发了很多请求.即使正确设置了缓存,仍然会有很多HEAD请求.

我正在寻找一种解决方案,它只会触发最少的请求(最好是1)来接收所有需要的图标.但我不喜欢spriting的概念,因为在这个概念中更改/替换/添加图标更加困难.

还有其他解决方案吗？

例如,是否要将所有图像base64编码到服务器上的一个文件,将它们发送到浏览器,用JavaScript拆分并将base64 src设置为img标签？

有人测试这种或不同的方法吗？

解决方法:

使用Base64数据URI内联CSS中的图像.

background-image: url('data:image/png;base64,.......');

您可以使用自定义PHP / node.js / …脚本转换图像,或使用在线转换器(如http://www.greywyvern.com/code/php/binary2base64)

这导致只发出一个HTTP请求(只有CSS文件的一个)但您无法单独控制每个内联资源的缓存.您需要为CSS文件设置缓存HTTP标头.

您可以让服务器对每个CSS文件请求编码图标,这样您每次更改图标时都无需手动重新转换图标.应该在服务器端包含一些简单的转换缓存.