Re: [心得] 有效減少 HTTP Request的CSS Sprites

看板Web_Design作者 (痞子軍團團長)時間16年前 (2009/12/07 12:46), 編輯推噓0(000)
留言0則, 0人參與, 最新討論串2/2 (看更多)
※ 引述《Fishmeal ( )》之銘言: : 原文連結:http://superlevin.pixnet.net/blog/post/29936462 :   CSS Sprites並不是什麼新技術,Dave Shea(CSS Zen Garden創辦人)在 : 2004年於A List Apart(ALA)就曾經提出CSS Sprites: Image Slicing’ : s Kiss of Death這篇文章了。 :   簡單的說,CSS Sprites就是把網頁上的圖片全部放在同一張圖片上,而 : 網頁載入時就祇要載入這張已經結合起來的圖片。再利用CSS的background-image : 與background-position來調整圖片,讓要顯示的部位顯示出來。 :   對瀏覽器而言,如果網頁中含有背景圖30張,就會有30個http request, : 如果合成一張後,就祇要1個http request,如果利用http cache的話,更可 : 以讓圖片cache在瀏覽器中。 :   像facebook(臉書)就利用這張圖片來處理icon;YUI(Yahoo User Interface) : 也利用這張圖片來做css sprites;而這篇文章也提出台灣著名的網站funP,也是 : 利用這樣子的技術。 這時候就會來推一下 GWT 已經把這些東西包好好的啦 也不用自己組圖、也不用自己算 pixel \囧/ 詳情可以參閱下面廣告文章 [被毆飛] [廣告文章] http://sites.google.com/a/psmonkey.org/pt2wiki/GWT/ImageBundle 不過,這還是有缺點的 當你組出來的圖太大,網路速度又太慢時 在 IE(6~8)會有機會圖出不來.... -- 侃侃長論鮮窒礙 眾目睽睽無心顫 Blog:http://blog.psmonkey.org 煢居少聊常人事 殺頭容易告白難 歡迎參觀 Java 版(@ptt.cc)精華區 \囧/ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 61.20.148.106
文章代碼(AID): #1B78YxeQ (Web_Design)
文章代碼(AID): #1B78YxeQ (Web_Design)