实测照片的HTTP恳求

请在流行访问器中开启检测网页页面，在Fiddler里查询http恳求。

1. 掩藏照片
<img src="1.jpg" style="display: none" />检测：test_1.html
结果：仅有Opera不造成恳求。
留意：用visibility: hidden掩藏照片时，在Opera下也会造成恳求。

2. 反复照片
<img src="1.jpg" /><img src="1.jpg" />检测：test_2.html
结果：全部访问器都只造成1次恳求 。

3. 反复情况
<style type="text/css">    .test1 { background: url(1.jpg) }    .test2 { background: url(1.jpg) }</style><div class="test1">test1</div><div class="test2">test2</div>检测：test_3.html
结果：全部访问器都只造成1次恳求。

4. 不存在的元素的情况
<style type="text/css">    .test1 { background: url(1.jpg) }    .test2 { background: url(2.jpg) } /* 网页页面中沒有class为test2的元素 */</style><div class="test1">test1</div>检测：test_4.html
结果：情况仅在运用的元素在网页页面中存在时，才会造成恳求。这对CSS架构来讲，很成心义。

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>检测：test_5.html
结果：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>检测：test_6.html
结果：除根据webkit3D渲染模块的Safari和Chrome，其它访问器只会恳求1张情况图。
留意：webkit模块访问器对情况图都恳求，是由于适用CSS3中的多情况图。

7. hover的情况载入
<style type="text/css">    a.test1 { background: url(1.jpg); }    a.test1:hover { background: url(2.jpg); }</style><a href="#" class="test1">test1</a>检测：test_7.html
结果：开启hover时，才会恳求hover情况下的情况。这会导致闪动，因而常常放在同1张情况图里根据旋转来完成。
留意：在照片no-cache的状况下，IE每次hover情况更改时，都会造成1次新恳求。很不尽人意。
2009-05⑴3晚填补：上面的解释有误，更详尽的解释请参照续集。旋转技能指的是Sprite技术性，事例：test_7b.html, 在ie6下不容易造成闪动。

8. JS里innerHTML中的照片
<script type="text/javascript">    var el = document.createElement('div');    el.innerHTML = '<img src="1.jpg" />';    //document.body.appendChild(el);</script>检测：test_8.html
结果：仅有Opera不容易立刻恳求照片。
留意：当加上到DOM树上时，Opera才会推送恳求。

9. 照片预载入
最常见的是JS计划方案：

1.针对掩藏照片和掩藏元素的情况，Opera不容易造成恳求。
2.针对掩藏元素的情况，Firefox也不容易造成恳求。
3.针对并未插进DOM树的img元素，Opera不容易造成恳求。
4.根据webkit模块的Safari和Chrome，适用多情况图。
5.其它场景，全部流行访问器维持1致。
对照片恳求的解决上，本人感觉Opera走在前列。

番外

1. 用Fiddler监管Opera时，假如是当地服务器，必须在Opera的代理商服务器设定里，将当地服务器勾选上。

2. 查询HTTP恳求数，也有1个万无1失的方式是，立即查询Apache的access.log文档。

3. 我的Firefox针对反复照片和反复情况，会造成反复恳求。禁用了全部拓展，难题依然。有知详细信息者，还望告之。