關於CSS圖像Sprite的建議

Question

我使用類似於Google事件日曆的應用程序。 應用程序的名稱是我的團隊事件日曆。 使用jQuery全日曆插件開發了這個功能。 在一個日曆中，每天我都會顯示我的哪個團隊成員是outofoffice（是從家/病/假期開始的員工工作）。

對於每個這個分區狀態，我有一個圖標，顯示它的目的。 我有72左右的outofoffice狀態，這將從數據庫中獲取圖標源\ 我有所有72斯塔茨與他們的關聯圖像圖標源在db作爲「images/pill.png」 每次，我從服務器獲取有關信息團隊。每天我都會得到團隊成員的名字，不在辦公室的狀態以及與狀態相關的圖像。

請考慮我的日曆在整個31天內是否已滿，並且每天我都會有大約10名員工。對於每一個這種不在辦公室的狀態，我都會得到一個圖像（這意味着許多對於不在辦公室狀態的圖像圖標的http請求）。

你可以請建議是否有利於保持CSS圖像sprite.But我有一個缺點，在任何時間點可以添加一個新的圖像圖標，這會使圖像精靈立即發生變化。維護/修改圖像精靈不是那麼容易）

如果沒有像精靈，你可以請建議什麼會在這裏

Answer 1

如果我理解您的方案正確，這將是使用一個很好的地方一個更好的解決方案一個精靈。一大組小圖像是理想的用例，使用單個精靈將大大減少HTTP流量。精靈可能看起來像是一個小開銷，但一旦你習慣了它並且它的表現還是值得花費額外的時間來組成精靈的。

保留一個PSD（或其他一些原始來源）的精靈方便。當您需要進行編輯時，添加一個新圖標等，然後更新PSD並導出新的精靈PNG。

另一個需要考慮的選項是圖標字體。您可能會看到類似Font Awesome，Bootstrap的Glyphicons或類似IcoMoon的工具。圖標字體有很多優點，主要是可擴展性和着色。如果你不需要，精靈的工作很好。