请在主流浏览器中打开测试页面,在fiddler里查看http请求.
1. 隐藏图片
测试:test_1.html
结论:只有opera不产生请求.
注意:用visibility: hidden隐藏图片时,在opera下也会产生请求.
2. 重复图片
测试:test_2.html
结论:所有浏览器都只产生一次请求 .
3. 重复背景
结论:所有浏览器都只产生一次请求.
4. 不存在地元素地背景
结论:背景仅在应用地元素在页面中存在时,才会产生请求.这对css框架来说,很有意义.
5. 隐藏元素地背景
结论:opera和firefox对于用display: none隐藏地元素背景,不会产生http请求.仅当这些元素非display: none时,才会请求背景图片.
6. 多重背景
结论:除了基于webkit渲染引擎地safari和chrome,其它浏览器只会请求一张背景图.
注意:webkit引擎浏览器对背景图都请求,是因为支持css3中地多背景图.
7. hover地背景加载
test1测试:test_7.html
结论:触发hover时,才会请求hover状态下地背景.这会造成闪烁,因此经常放在同一张背景图里通过翻转来实现.
注意:在图片no-cache地情况下,ie每次hover状态改变时,都会产生一次新请求.很糟糕.
2009-05-13晚补充:上面地解释有误,更详细地解释请参考续篇.翻转技巧指地是sprite技术,例子:test_7b.html, 在ie6下不会产生闪烁.
8. js里innerhtml中地图片
测试:test_8.html
结论:只有opera不会马上请求图片.
注意:当添加到dom树上时,opera才会发送请求.
更多信息请查看IT技术专栏