|
原文：http://blog.rexsong.com/?p=746#comments
加速的關鍵，不是降低重量，而是減少個數(shù)。如果重量在200K以內，只要網(wǎng)絡不是特別慢，效率都差不多。但是，如果圖片個數(shù)多一倍，效率將明顯低一個檔次。
傳統(tǒng)切圖講究精細，圖片規(guī)格越小越好，重量越小越好，其實規(guī)格大小無所謂，計算機統(tǒng)一都按Byte計算。客戶端每顯示一張圖片都會向服務器發(fā)送請求，所以，圖片越多請求次數(shù)越多，造成延遲的可能性也就越大。因為一張圖片的傳輸時間，通常遠小于請求等待的時間。
減少圖片的三個技巧(CSS Sprite)：
1. 圖片限制(Image Slicing)
典型如文本編輯器，小圖標特別多，打開時一張張跑出來，給用戶的感覺很不好。如果能用一張圖解決，則不會有這個問題，比如百度空間、163博客、Gmail都是這么做的。
Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites
2. 單圖轉滾(Single-image Rollovers)
觸發(fā)切換圖片的需求，傳統(tǒng)方案得重新請求新圖片，因為網(wǎng)絡問題經(jīng)常造成停留或等待。如果能把多種狀態(tài)合并成一張圖，就能完美解決，然后再使用背景圖技術模擬動態(tài)效果。
ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/
3. 延長背景(Extend Background Image)
如果圖片的某邊可以背景平鋪無限延長，則不需要每個角、每條邊單獨搞出來，圖片能少一個就少一個。其實，這個理論還可以擴展到四角容器里，好處是能大大簡化HTML Structure。
Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/
綜合案例
Google Korea（1和2技巧）
http://demo.rexsong.com/200705/google_korea/
CSS Menus（2和3技巧）
http://demo.rexsong.com/200705/css_background_menus/
本文鏈接：http://www.95time.cn/tech/site/2007/4750.asp 
出處：藍色理想
責任編輯：moby
◎進入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論
|
