请在主流浏览器中打开测试页面,在fiddler里查看http请求.) [( e( `' r, }0 K* V- f
1. 隐藏图片
d* O% x4 k3 c+ ?0 ^<img src=1.jpg style=display: none />测试:test_1.html" n; O: d# L4 p# Q; Q
结论:只有opera不产生请求.$ X" b: d/ L( T$ E4 j) ^
注意:用visibility: hidden隐藏图片时,在opera下也会产生请求.5 Z8 V! |' e6 x
2. 重复图片& t0 y' J p7 A+ _8 B' h3 ~
<img src=1.jpg /><img src=1.jpg />测试:test_2.html! ^' W9 ?5 i0 U" j0 a7 \) k! K
结论:所有浏览器都只产生一次请求 .* I' Z( D! [7 ]- c/ @9 ]
3. 重复背景* W A7 ^ [/ ^ Z; `9 ]
<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
7 m# H8 L7 {: v$ h5 ?结论:所有浏览器都只产生一次请求.3 |. c$ w' y/ x, a5 u2 \$ B
4. 不存在地元素地背景
. t" X8 [8 ^ f<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' ~5 K" D8 A0 J& t$ ]) O( S
结论:背景仅在应用地元素在页面中存在时,才会产生请求.这对css框架来说,很有意义.
) p+ `' H4 r% f7 A5. 隐藏元素地背景
) K* s6 i6 p( v+ r& D' z& _2 U# \<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
' ?* w) V8 T$ h; L结论:opera和firefox对于用display: none隐藏地元素背景,不会产生http请求.仅当这些元素非display: none时,才会请求背景图片., a' e3 S5 Q" Q, H e
6. 多重背景 ?6 _; G" D( A7 c4 V9 b1 r G q
<style type=text/css> .test1 { background: url(1.jpg); } .test1 { background: url(2.jpg); }</style><div class=test1>test1</div>测试:test_6.html2 W7 u! K- H3 J- {$ Y R$ X
结论:除了基于webkit渲染引擎地safari和chrome,其它浏览器只会请求一张背景图.
5 M, D( }% K0 M9 d注意:webkit引擎浏览器对背景图都请求,是因为支持css3中地多背景图., \$ v7 B5 Y! r l4 q+ V
7. hover地背景加载- W* g' G6 K- M: H* y: e4 ?
<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.html4 J& i O, K3 Z5 V0 c8 A
结论:触发hover时,才会请求hover状态下地背景.这会造成闪烁,因此经常放在同一张背景图里通过翻转来实现.1 @( A; ]6 |& k
注意:在图片no-cache地情况下,ie每次hover状态改变时,都会产生一次新请求.很糟糕.
# ^& _3 s( }2 g7 T. b2009-05-13晚补充:上面地解释有误,更详细地解释请参考续篇.翻转技巧指地是sprite技术,例子:test_7b.html, 在ie6下不会产生闪烁.- [$ I1 Y) N0 b: `. R) k: `
8. js里innerhtml中地图片& G' `. q5 N \
<script type=text/javascript> var el = document.createelement('div'); el.innerhtml = '<img src=1.jpg />'; //document.body.appendchild(el);</script>测试:test_8.html4 _+ J! g* k1 R, P& h6 D
结论:只有opera不会马上请求图片./ T0 \4 K7 ]3 E4 Y, c: I: q
注意:当添加到dom树上时,opera才会发送请求.
& q H7 Y) t! {* n+ r1 C$ H# p9 z
8 o# |; v$ Q! I- G2 }更多网页制作信息请查看: 网页制作 |