图片的HTTP

1. 隐藏图片

<img src="a.jpg" style="display: none" />

结论：这种情况下，因为 <img>标签在DOM树中占有一席，所以大部分浏览器不管 display 的属性值是什么都会发送请求。

但是也有例外，对于Opera浏览器则不会产生请求。可是如果这里用 visibility: hidden 隐藏图片，那么Opera就会产生请求。

2. 重复图片

<img src="a.jpg" />

<img src="a.jpg" />

结论：所有浏览器都只产生一次请求 。

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(1.jpg) }

.test2 { background: url(2.jpg) } /* 页面中没有class为 test2 的元素 */

</style>

<div class="test1">test1</div>

结论：背景仅在应用的元素在页面中存在时，才会产生请求。此处页面中没有应用的元素所以不会加载2.jpg。

5. 隐藏元素的背景

<style type="text/css">

.test1 { background: url(1.jpg); display: none; }

.test2 { background: url(2.jpg); visibility: hidden; }

</style>

<div class="test1">test1</div>

结论：Opera 和 Firefox对于用 display: none 隐藏的元素背景，不会产生HTTP请求。仅当这些元素非 display: none 隐藏时，才会请求背景图片。

6. 多重背景

<style type="text/css">

.test1 { background: url(1.jpg); }

.test1 { background: url(2.jpg); }

</style>

<div class="test1">test1</div>

结论：除了基于 webkit 渲染引擎的 Safari，其它浏览器只会请求一张背景图。另外，chrome 已经换血液了，这里也只加载一次且是最后那个背景图片。

webkit 引擎浏览器对背景图都请求，是因为支持CSS3中的多背景图。