圖片的http請求,有很多種情況,那么究竟什么情況下面不會發生請求呢?下面我用案例一一列舉一下,希望對你深入了解http圖片請求有所幫助。
1.隱藏圖片
結論:只有Opera不產生請求。 注意:用visibility: hidden隱藏圖片時,在Opera下也會產生請求
2.重復圖片
所有瀏覽器都只產生一次請求
3.重復背景
<style type="text/css">
.test1 { background: url(A.jpg) }
.test2 { background: url(A.jpg) }
</style>
<div class="test1">test1</div>
<div class="test2">test2</div>
結論:所有瀏覽器都只產生一次請求。
4. 不存在的元素的背景
<style type="text/css">
.test1 { background: url(img/A.jpg)}
.test2 { background: url(img/B.jpg)} /* 頁面中沒有class為test2的元素 */
</style>
<div class="test1">test1</div>
背景僅在應用的元素在頁面中存在時,才會產生請求。這對CSS框架來說,很有意義。
5. 隱藏元素的背景
<style type="text/css">
.test1 { background: url(A.jpg); display: none; }
.test2 { background: url(B.jpg); visibility: hidden; }
</style>
<div class="test1">test1</div>
結論:Opera和Firefox對于用display: none隱藏的元素背景,不會產生HTTP請求。
僅當這些元素非display: none時,才會請求背景圖片。
6. 多重背景
<style type="text/css">
.test1 { background: url(A.jpg); }
.test1 { background: url(B.jpg); }
</style>
<div class="test1">test1</div>
上面這段代碼的http請求,只會請求http2.jpg這一張圖片,原因是test1的class把上面的給覆蓋掉了,所有只請求后面的一張圖片!
<style type="text/css">
.test1 { background-image:url("A.jpg"),url("B.jpg"); }
</style>
<div class="test1">test1</div>
結論:webkit引擎瀏覽器對背景圖都請求,是因為支持CSS3中的多背景圖。
7. hover的背景加載
<style type="text/css">
a.test1 { background: url(A.jpg); }
a.test1:hover { background: url(B.jpg); }
</style>
<a href="#" class="test1">test1</a>
結論:觸發hover時,才會請求hover狀態下的背景。不觸發的話,只請求默認的背景圖片。
8. JS里innerHTML中的圖片
<script type="text/javascript">
var el = document.createElement('div');
el.innerHTML = '';
//document.body.appendChild(el);
</script>
結論:只有Opera不會馬上請求圖片。
注意:當添加到DOM樹上時,Opera才會發送請求
9. 圖片預加載
最常用的是JS方案:
<script type="text/javascript">
new Image().src = 'A.jpg';
new Image().src = 'B.jpg';
</script>
在無JS支持的環境下,可以采用隱藏元素來預加載: