| 标题 | 实测图片的http请求 |
| 范文 | 请在主流浏览器中打开测试页面，在fiddler里查看http请求. 1. 隐藏图片 <img src="1.jpg" />测试：test_1.html 结论：只有opera不产生请求. 注意：用visibility: hidden隐藏图片时，在opera下也会产生请求. 2. 重复图片 <img src="1.jpg" /><img src="1.jpg" />测试：test_2.html 结论：所有浏览器都只产生一次请求 . 3. 重复背景 <style type="text/css"> .test1 { background: url(1.jpg) } .test2 { background: url(1.jpg) }</style><div>test1</div><div>test2</div>测试：test_3.html 结论：所有浏览器都只产生一次请求. 4. 不存在地元素地背景 <style type="text/css"> .test1 { background: url(1.jpg) } .test2 { background: url(2.jpg) } /* 页面中没有class为test2地元素 */</style><div>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>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>test1</div>测试：test_6.html 结论：除了基于webkit渲染引擎地safari和chrome，其它浏览器只会请求一张背景图. 注意：webkit引擎浏览器对背景图都请求，是因为支持css3中地多背景图. 7. hover地背景加载 <style type="text/css"> a.test1 { background: url(1.jpg); } a.test1:hover { background: url(2.jpg); }</style><a href="#">test1</a>测试：test_7.html 结论：触发hover时，才会请求hover状态下地背景.这会造成闪烁，因此经常放在同一张背景图里通过翻转来实现. 注意：在图片no-cache地情况下，ie每次hover状态改变时，都会产生一次新请求.很糟糕. 2009-05-13晚补充：上面地解释有误，更详细地解释请参考续篇.翻转技巧指地是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方案： |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。