Ruby on Rails项目中的CSS Sprite生成器

Question

3

我目前正在处理一个大型、高流量的 Ruby on Rails 网站，为了降低页面加载时间，我们考虑将背景图片合并成精灵图。虽然有很多工具可供选择，但很多工具还处于开发的初期，并且不支持我们需要的某些功能。

我们所需要的重要功能包括：

- 横向或纵向平铺 - 可以与我们的 Rake 构建自动化集成 - 支持透明度 - 自动生成精灵图像和 CSS - 成熟稳定 - 易于维护 - 开源

如果它是用 Ruby 编写的，那就更好了，但只要能够与 Rake/Cap 集成，就不是必需的。

是否有任何符合这些标准（或大部分标准）的 CSS 精灵图工具？

- AaronThomson

3个回答

1

关于克里斯建议使用Jammit通过data-uri的一个大问题是它不支持IE6/7。

- bobulus

1

有一个新的宝石叫做active_assets，它可以让你在rails堆栈中完全集成sprite。请在github上查看。该宝石允许您定义精灵，包括要包含在精灵中的图像列表，然后生成精灵和相应的样式表。上面链接的自述文件中包含了所有信息。

- shwoodard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Heald · Accepted Answer

不妨使用data-uri代替雪碧图？Jammit可以生成带有小图像的CSS文件，编译为data-uri对象。这实际上比精灵表更有效率，因为这意味着您只需要一个HTTP连接来处理样式表，而不是一个用于样式表和另一个用于精灵表。

要使用它，只需在路径中的某个位置引用小图像（图标、重复背景等）并加上/embed/，它将生成适用于各种浏览器的data-uri、MHTML和普通版本的样式表。

Jammit还可以将多个样式表（和JavaScript）编译成一个文件（每种类型一个），如果您想对AJAX响应进行超级优化，还可以使用一些JavaScript模板。

缺点是a）如果多次引用图像，则会为每个引用进行编译，b）更改图像会导致客户端需要重新下载整个样式表。但是，由于这些资源通常很少更改，因此这可能是一种解决方案，可以使页面加载速度更快，而不会增加开发过程中的任何额外开销。

为了缓解这两个问题，您可以拥有一个单独的样式表，专门用于图像引用，因此您将拥有一个用于常规布局的样式表，然后另一个将编译所有数据URI资源。这将导致两个HTTP请求，但这意味着您可以更改CSS或嵌入的图像，而无需强制重新下载整个其他一半的样式。