为动态图像生成CSS精灵

Question

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

如果这些图像是静态的，我会创建一个CSS精灵并用一个替换50个请求。因为它们是动态的，所以当然不是那么容易。我正在寻找一个工具/库/方法，我可以使用它来在运行时将这些图像聚合成一个精灵。幸运的是，图像大小是恒定的，对所有人来说都是一样的，这应该会使这更容易。

有什么建议吗？

Answer 1

您可以检查并尝试使用jawr（https://jawr.dev.java.net/）库来生成/修改（也压缩，合并）servlet上的css文件。它可以选择动态更改背景图像。 您可以安排捆绑来切换用于更换皮肤的css文件。

另外一面：您也可以管理和安排.js文件！

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“背景”适当加载图像并设置要显示的单个精灵的偏移）。如果你只做简单的事情，就不需要JavaScript。

Answer 3

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

我现在正在考虑使用C＃，增加复杂性，创建动态图像并将其发送到客户端，减少单个图像访问。

值得进行一些分析。