为动态图片生成CSS精灵

Question

我有一个网页，其中包含大约20-50个动态图像（从非静态源提供的图像）。这些图像是通过基于请求URL的servlet提供的。这导致每个图像都生成一个请求，从而导致性能下降。

如果这些图像是静态的，我会创建CSS sprite并用单个请求替换50个请求。当然，由于它们是动态的，这并不容易。我正在寻找一种可以在运行时将这些图像聚合成单个sprite的工具/库/方法。幸运的是，图像大小是恒定的，对所有图像都相同，这应该使这个过程更加容易。

有什么建议吗？

- Zecrates

---

Java - 抱歉，应该强调servlet。 - Zecrates

嗨@Zecrates，我也遇到了同样的问题，请问您能否详细说明一下您是如何解决这个问题的。谢谢。 - Aftab

Answer 1

您可以尝试使用jawr库（https://jawr.dev.java.net/）来生成/修改（还可以压缩、合并）servlet上的CSS文件。它有动态更改背景图像的选项。

附加优势：您还可以管理和安排您的.js文件！

- eringen

---

我快速浏览了一下，它似乎能够做到我想要的，谢谢！ - Zecrates

Answer 2

您可以通过调用系统命令行，使用免费的ImageMagick库来附加图像，这样您就不需要在Java中编写太多代码，而且速度更快。

要进行水平附加，请使用以下命令：

convert image1.gif image2.gif image3.gif +append result.gif

如果要进行垂直追加，请使用以下命令：

convert image1.gif image2.gif image3.gif -append result.gif

更多信息请参见：http://www.imagemagick.org/Usage/layers/#append 因此，使用CSS可以使用单个图像和简单的偏移量来显示精灵图（您可以使用CSS“background”属性加载图像并设置要显示的单个精灵的偏移量）。如果只需要进行简单操作，则不需要JavaScript。

- Davide Muzzarelli

Answer 3

服务器上的处理开销值得吗？

我现在正在考虑这个问题，对于C＃来说，是否值得增加复杂性来创建动态图像并将其发送到客户端，以减少单个图像访问。

这是一个值得进行一些分析的权衡。

- zeristor