CSS圖像精靈

我在我的網站中使用4個獨立的圖像，現在如果我使用圖像精靈來顯示這4個圖像，它會減少http請求，如果是這樣，我想知道。CSS圖像精靈

考慮下面實例1：（這裏是2 HTTP請求發送）

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
#home { 
width: 46px; 
height: 44px; 
background: url(sevenwonders.gif) 0 0;//first http request 
} 

#next { 
width: 43px; 
height: 44px; 
background: url(sevenwonders.gif) -91px 0; //second http request 
} 
</style> 
</head> 
<body> 

<img id="home" src="something.gif"> 
<img id="next" src="something.gif"> 

</body> 
</html>

考慮例如2以下（2個HTTP請求發送）

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

<img id="home" src="tajmahal.gif">//first http request 
<img id="next" src="pisatower.gif">//second http request 

</body> 
</html>

謝謝你這麼多寶貴的時間。

來源

2016-02-28 Mari Selvan

你的問題到底是什麼？在第一個示例中，您只有一個HTTP請求，因爲它只有一個圖像，但使用了兩次背景偏移量。 –

謝謝你@ johnny kutnowski .anyhow我做了兩個http請求的單個圖像。這是我的疑問 –

可以請你詳細解答@johnny kutnowski –

按照您的代碼並使用示例圖像進行說明，以下證明您無論是否重複執行每個圖像都只會執行一次HTTP請求。

考慮以下幾點：

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
#home { 
width: 46px; 
height: 44px; 
background: url(http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg) 0 0;//first http request 
} 

#next { 
width: 43px; 
height: 44px; 
background: url(http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg) -91px 0; //second http request 
} 
</style> 
</head> 
<body> 

<img id="home" src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG"> 
<img id="next" src="http://www.online-image-editor.com//styles/2014/images/example_image.png"> 

</body> 
</html>

這僅返回3個請求：1％的圖像中的主體和1的CSS背景圖像，使用了兩次。

有一個在你的代碼標記和CSS的濫用然而問題。您不應將image-background屬性設置爲img標記，該標記本身就是一個圖像。

選擇一種方法，並堅持下去：要麼在你的身體使用的圖像（這將導致在多個圖像，並且因此多個請求），或使用中性元素，如一個div與指定background-image性能，使用background-position抵消子畫面圖像。

來源

2016-02-28 11:52:57

很好解釋。 @Mari Selvan它取決於設計的要求來選擇方法。但目標應該是儘快加載頁面並儘可能減少請求。所以使用精靈無論是可以的都是好事。 +1 – CodeRomeos

@MariSelvan樂於幫忙！如果您認爲這解決了您的問題，請考慮接受我的回答，以便未來的用戶也可以從中受益。 –

首先，我不知道爲什麼你選擇使用<img>標籤並附背景圖像呢？
其次，每個圖像src是一個HTTP請求（CSS和HTML標籤），因此使用精靈無疑是一個好主意，當你選擇顯示的圖像作爲背景圖像。
您可能會考慮將1px x 1px透明gif加載到img標記的src中，以最大程度地減少http加載。（可以將其拉伸至所希望的寬度和高度）

希望它幫助。

來源

2016-02-28 11:44:10

不錯的櫃檯..謝謝男人真的很有幫助@ shay Zalman –

當然.. 我剛剛注意到我沒有準確回覆關於http請求...如果你加載兩次相同的圖像，只有一個http請求可以確認。 @ mari-selvan –

沒關係..它是我可憐的英語。@ shay Zalman –

回答

相關問題