|
回顧之前的出現(xiàn)的處理方式，可以歸總為三種：
- 前景圖的插入
這應是最原始的處理方式了，將眾多單個等級的圖片有序命名存放到一個目錄，由前端頁面應用，通過修改文件名的方式更換不同的等級顯示。在實際的用戶列表頁面中，因為不同的用戶通屬不同的等級，那么，就會顯示不販等級圖標，如上面假設，就會同時產(chǎn)生38個請求。且在項目的維護上，極易存在瓶頸。假設根據(jù)需目需要對圖標文件更換存放目錄或更改其尺寸大小，那么需要大面積對所有應用過的開發(fā) template文件排查處理（更改URL，寬高定義，文件名等），很多情況難以維系在可控范圍。
- 透明圖+背景的實現(xiàn)
這是Qzone項目中使用最多的一種方式，在項目的訪問速度體驗優(yōu)化及圖標實際應用中起到不可磨滅的作用，該方式后期也陸續(xù)為國內(nèi)外其它網(wǎng)站使用。其具體實現(xiàn)方式是，保存一張1*1像素的透明圖片，并將其設置長時間cache，因其display屬性的特殊性，圖片在頁面布局上得心應手，且解決了多請求的問題，同時解決圖片合并區(qū)域擴展維護的問題。但是，一旦在客戶端cache文件隊列中被擠掉，cache失敗，該方式容易讓這張透明的前景替位圖產(chǎn)生洪水式的請求， 造成服務器壓力和大流量。且<img />容易繼承項目中其它定義。在圖標與文字的垂直對齊上各瀏覽器的渲染解析不一樣，從而增加一些兼容代碼。
也有衍生出來空src的處理方式，如<img src=”" class=”app_icon” alt=”icon” />，表面上看，可以節(jié)省文件的請求，但事實上，它除了會導致大量的無效請求外，還會向日給apache不斷寫入錯誤的log，造成過大的服務端壓力，同時，在非IE瀏覽器（如firefox)也會表現(xiàn)出缺省圖象的紅叉。
- 內(nèi)容標簽+背景
這里說的是帶文字等內(nèi)容的標簽加入黃鉆等級圖標背景來實現(xiàn)，如<span>我是黃鉆7級用戶</span>，給span的左邊定義一個圖標，把文字向右移動一定的位置。大伙在實踐中驗證，這種在語義上和實現(xiàn)上，可以說是完美的了。但是，不方便項目代碼的規(guī)劃和管理，特別像等級圖片這類的可以歸入庫的代碼及應用方式。同時，標題的大小區(qū)域為不可控，在后續(xù)的維護中，更會不定期更改其區(qū)域大小，那么，就在圖片的合并上存在瓶頸，難以確定一個圖片該預留多大的透明區(qū)域，使之不影響到其它場景的圖片應用，也可能會因為后期的維護處理不當，影響到其它標簽區(qū)域的背景顯示異常，造成不良的用戶體驗。
- 標簽載體+背景
結合前幾點所述，用一個標簽作為圖片的載體，再給它定義背景等屬性，顯示出相應的圖標。它既可以免除用圖片處理產(chǎn)生的流量和請求及服務器壓力，又減去合并圖片時所考慮的預留空間尺寸。一般標簽不具img的特殊屬性，既能成塊狀顯示出圖標，又能和文字等共處一行內(nèi)，那么在選取的這個標簽要在樣式上定義得較少，不易繼承樣式影響表現(xiàn)，破壞頁面的兼容和庫文件的管理維護。
在實際項目中，選用了strong作為圖標的替代標簽：
出處：騰訊Webteam
責任編輯：bluehearts
上一頁 由黃鉆等級圖標處理引發(fā)的思考 [1] 下一頁 由黃鉆等級圖標處理引發(fā)的思考 [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 由黃鉆等級圖標處理引發(fā)的思考 [2]
