關於CSS Image Sprite的建議

Question

我使用類似於Google事件日歷的應用程序。 該應用程序的名稱是“我的團隊活動日歷”。 使用jQuery Full Calendar插件開發了此功能。 在日歷中，我每天會顯示我的哪個團隊成員不在辦公室（是在家工作/病假/休假的員工）。

對於每個這種辦公室狀態，我都有一個圖標，顯示其目的。 我有72個辦公室外狀態，可以從數據庫中獲取圖標來源\\我有所有72個staut及其在db中的關聯圖像圖標源，例如“ images / pill.png”。每次，我都從服務器獲取有關團隊的信息。每天我都會得到團隊成員的姓名，不在辦公室的狀態以及與該狀態相關的圖像。

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

您能建議保持CSS圖像精靈好嗎。但是我隨時都有一個缺點，可以在新的休假類型中添加新的圖像圖標，這會立即改變圖像精靈。（維護/修改圖像精靈不是那么容易）

如果沒有圖像精靈，請在這里提出什么更好的解決方案

Answer 1

如果我正確理解了您的情況，那么這將是使用Sprite的絕佳場所。 大量的小圖像是一個理想的用例，使用一個單一的圖片將大大減少HTTP流量。 Sprite最初看起來似乎有點開銷，但是一旦您習慣了它就可以了，而且值得花幾分鍾的時間來組成Sprite。

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

要考慮的另一種選擇是圖標字體。 您可能會看到諸如Font Awesome ，Bootstrap的Glyphicons或IcoMoon之類的工具。 圖標字體具有很多優點，主要是可伸縮性和着色。 但是，如果您不需要它，精靈可以正常工作。