Image Sprites

在使用 Image 的時候有幾個狀況讓圖片載入有點不順

  • 瀏覽器對同一個網域的 HTTPRequest 數量是有限制的
  • 圖片沒有預載入

 

舉個例子,當按按鈕之類的動作要用另一個圖檔來表示 :hover 的時候可能會有些載入造成的延遲跟空白

解決的辦法就是使用 Sprites

Sprites把多個 Image 放在同一個檔案裡,然後用 background-position 來控制 X Y 軸

螢幕快照 2013-10-12 下午10.10.36

例如 Gmail 的這個 Sprites 就把一堆 Image 放在一起

下面的 code 簡單示範如果兩個 logo 一個在 (-100,0) 一個在(0,100) 的位置


.logoA logoB {
background: url(logo.png);
display: block;
width: 100px;
height: 100px;
}

.logoA {
background-position: -100px 0;
}

.logoA {
background-position: 0 100px;
}

要算出坐標的話可以使用 Spritecow 來用
http://www.spritecow.com/

這樣在同一個圖上面就不會有 HTTPRequest 受限而且一開始就載入了整張圖

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s