Ruby on Rails项目的CSS Sprite生成器

时间:2010-09-30 01:37:13

标签: ruby-on-rails ruby sprite css-sprites

我目前正在开发一个大型,高度流量的Ruby on Rails网站,为了减少我们的页面加载时间,我们正在研究我们的背景图片。似乎有很多工具,但许多工具处于开发的早期阶段,许多工具不支持我们需要的一些功能。

对我们很重要的功能:

  • x或y重复
  • 使用我们的rake构建实现自动化
  • 透明度
  • 自动生成精灵图像和css
  • 成熟
  • 易于维护
  • 开源

如果它是用Ruby编写的,那将是一个奖励,但只要它可以与rake / cap设置集成,它就不是必需的。

是否有适合大多数(全部?)这些标准的css sprite工具?

3 个答案:

答案 0 :(得分:7)

为什么不使用data-uri而不是spriting图像? Jammit可以使用以data-uri对象编译的小图像生成CSS文件。这实际上比精灵表更高效,因为这意味着你只有一个HTTP连接用于样式表,而不是一个用于样式表,一个用于精灵表。

要使用它,你只需要在路径某处用/ embed /引用你的小图像(图标,重复背景等),它就会生成数据的uri,MHTML和简单版本的样式表用于服务到各种浏览器。

Jammit还将多个样式表(和Javascripts)编译成一个文件(每种类型),如果你想用你的AJAX响应进行超级优化,也可以使用一些Javascript模板的东西。

缺点是a)如果你多次引用一个图像,它会被编译为每个参考,b)更改图像会导致客户需要重新下载整个样式表。但是,由于这些资产通常很少发生变化,因此它可以成为一种解决方案,可以在不增加任何额外开销的情况下加快页面加载速度。

为了减轻这两个问题,你可以有一个单独的样式表,它只用于图像引用,所以你有一个样式表用于普通的布局,然后是另一个样式表来编译所有的数据uri资源。这将导致两个HTTP请求,但这意味着您可以更改CSS或嵌入的图像,而无需强制重新下载整个另外一半的样式。

答案 1 :(得分:1)

这个名为active_assets的新gem可以为你的rails堆栈提供完整的sprite集成。请查看github。宝石让你定义你的精灵,包括要包含在精灵中的图像列表,然后生成精灵和相应的样式表。上述链接的自述文件包含所有信息。

答案 2 :(得分:1)

克里斯建议通过Jammit使用数据uri的一个很大的负面影响是,它不支持IE6 / 7。