用户界面-关于CSS图像精灵的建议



我在一个类似于谷歌活动日历的应用程序上工作。应用程序的名称是"我的团队活动日历"。这是使用jQuery完整日历插件开发的。在日历中,每一天,我都会显示我的哪个团队成员不在办公室(是在家工作/生病/休假的员工)。

对于每个这种外出状态,我都有一个图标,显示它的用途。我有72个外出状态,可以从数据库中获取图标源\我有所有72个stauts,他们在数据库中的关联图像图标源为"images/pill.png"每次,我都会从服务器上获取团队的信息。每天我都会获取团队成员的姓名、外出状态和与状态相关的图像。

考虑一下,如果我的日历整整31天都是满的,那么我每天大约有10名员工。对于每一个外出状态,我都会得到一个图像(这意味着许多http请求外出状态的图像图标)。

你能建议一下维护css图像精灵是否好吗。但我有一个缺点,在任何时候都可以添加新的休假类型和新的图像图标,这会立即改变图像精灵。(维护/修改图像精灵并不是那么容易)

如果不是图像精灵,你能在这里建议什么是更好的解决方案吗?

如果我正确理解你的场景,这将是一个使用精灵的好地方。一大组小图像是一个理想的用例,使用单个sprit将显著减少HTTP流量。精灵一开始可能看起来有点开销,但一旦你习惯了它,它也不错,而且它的性能非常值得多花几分钟来创作精灵。

为精灵保留一个PSD(或其他一些原始源)。当你需要进行编辑时,添加一个新的图标等,然后更新PSD并导出你的新精灵PNG。

另一个需要考虑的选项是图标字体。你可能会看到像Font Awesome,Bootstrap的Glyphicons或像IcoMoon这样的工具。图标字体有很多优点,主要是可扩展性和彩色化。如果你不需要的话,精灵也可以。

相关内容

  • 没有找到相关文章