请在主流浏览器中打开测试页面,在fiddler里查看http请求.# Q K' w$ @( D9 i: b5 H
1. 隐藏图片9 N" i- o% c' `. h& h* K9 L3 L
<img src=1.jpg style=display: none />测试:test_1.html
, E5 @% a9 p' N) n! G, T结论:只有opera不产生请求.
* ?% U: \0 p6 n2 v注意:用visibility: hidden隐藏图片时,在opera下也会产生请求.; k. l+ H* ~: w; @7 j' J Z
2. 重复图片1 t: w, h, A0 J- \$ u
<img src=1.jpg /><img src=1.jpg />测试:test_2.html
5 _2 I( s* u3 g' J结论:所有浏览器都只产生一次请求 .1 e) m% h) O: V2 f0 y" a
3. 重复背景" {& c/ |0 K# f9 w
<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
) T' Y8 x F! H/ l3 P& Y结论:所有浏览器都只产生一次请求.
* r7 G- h% ~) r4 N z X9 |4 I/ w4. 不存在地元素地背景
3 X; `# u; i7 |: W<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
: Z/ L0 }% v$ N+ c6 F8 H: v' W结论:背景仅在应用地元素在页面中存在时,才会产生请求.这对css框架来说,很有意义.6 O4 i M& r. l B8 x4 O
5. 隐藏元素地背景
/ S I' O$ l3 I1 B<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% T3 T( Y, j# O! L8 @, C U9 Q) w5 p
结论:opera和firefox对于用display: none隐藏地元素背景,不会产生http请求.仅当这些元素非display: none时,才会请求背景图片.+ Z* r; Z) m- @+ P& f7 ~+ m
6. 多重背景. c& I- e$ g6 H& Y: c7 s0 u
<style type=text/css> .test1 { background: url(1.jpg); } .test1 { background: url(2.jpg); }</style><div class=test1>test1</div>测试:test_6.html: _- _* B3 F3 d2 q6 r% Q3 f% F( b+ N
结论:除了基于webkit渲染引擎地safari和chrome,其它浏览器只会请求一张背景图.+ V: k' E Z* K+ N- s4 D
注意:webkit引擎浏览器对背景图都请求,是因为支持css3中地多背景图.
5 V9 P3 R( S; F% m! J7. hover地背景加载
& [8 v$ }5 Q7 c% m1 Z g& ]4 b4 G* o<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
( I% A; W& }% z: N1 b结论:触发hover时,才会请求hover状态下地背景.这会造成闪烁,因此经常放在同一张背景图里通过翻转来实现.2 d* C6 B! D& F$ W
注意:在图片no-cache地情况下,ie每次hover状态改变时,都会产生一次新请求.很糟糕.# d$ ]' d8 s/ z8 K6 D
2009-05-13晚补充:上面地解释有误,更详细地解释请参考续篇.翻转技巧指地是sprite技术,例子:test_7b.html, 在ie6下不会产生闪烁.
3 M/ s+ ^$ s) n+ j8. js里innerhtml中地图片+ }* r s* W5 H5 d. `
<script type=text/javascript> var el = document.createelement('div'); el.innerhtml = '<img src=1.jpg />'; //document.body.appendchild(el);</script>测试:test_8.html! j( B% a [0 O: G& n1 v) Q
结论:只有opera不会马上请求图片.
2 R' E s1 D- H" r9 w- l注意:当添加到dom树上时,opera才会发送请求.$ f6 W! P# ~, D) H- C
0 n1 h- D: r$ c) k9 w6 \* H更多网页制作信息请查看: 网页制作 |