请在主流浏览器中打开测试页面,在fiddler里查看http请求.; f% P! @' D2 a/ }
1. 隐藏图片
- e6 y& M( T. {, S<img src=1.jpg style=display: none />测试:test_1.html
. q/ ?6 z0 B& ^9 g结论:只有opera不产生请求.2 w9 T1 w* B- n+ i- E
注意:用visibility: hidden隐藏图片时,在opera下也会产生请求.1 S3 C# _: H' ]) L) T" L
2. 重复图片" Q: x3 X8 f( n, \- j6 F6 f
<img src=1.jpg /><img src=1.jpg />测试:test_2.html
) O! {% X/ D/ b) p结论:所有浏览器都只产生一次请求 .5 {# K* G1 {, |) x# u! m+ H; n
3. 重复背景1 i- ?# H; m# \) d3 Q
<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.html8 D5 A, N) x; t7 Z
结论:所有浏览器都只产生一次请求.0 ]9 n- R2 g& Q8 Q8 p
4. 不存在地元素地背景
y4 x$ U8 h5 T+ B( E<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
- @# ~4 O: ^0 E7 \# {结论:背景仅在应用地元素在页面中存在时,才会产生请求.这对css框架来说,很有意义.
1 K1 \6 j: T% ~. \- [. p. H5. 隐藏元素地背景 S. m, E7 ^& H$ A9 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
! i: H8 ?" x4 l$ f" B- @+ a% |6 y结论:opera和firefox对于用display: none隐藏地元素背景,不会产生http请求.仅当这些元素非display: none时,才会请求背景图片.
" V6 [6 e) R3 q; p( T! |6. 多重背景1 K0 i' V J* ^& I0 D
<style type=text/css> .test1 { background: url(1.jpg); } .test1 { background: url(2.jpg); }</style><div class=test1>test1</div>测试:test_6.html, y! r% g6 S2 K0 F
结论:除了基于webkit渲染引擎地safari和chrome,其它浏览器只会请求一张背景图.' B6 l& n4 o5 A
注意:webkit引擎浏览器对背景图都请求,是因为支持css3中地多背景图.
% E) Y* i1 {. }7. hover地背景加载
/ X( e7 f! N2 |4 A$ S& 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
4 e: m, c5 @' y/ j8 z/ ?( ?; A结论:触发hover时,才会请求hover状态下地背景.这会造成闪烁,因此经常放在同一张背景图里通过翻转来实现.
/ _' v( b. c' ?( i0 P# e0 l注意:在图片no-cache地情况下,ie每次hover状态改变时,都会产生一次新请求.很糟糕.5 R" v5 O: z0 O5 K; [$ s! `
2009-05-13晚补充:上面地解释有误,更详细地解释请参考续篇.翻转技巧指地是sprite技术,例子:test_7b.html, 在ie6下不会产生闪烁.
( p* {0 Y5 M+ D1 O! W" U8. js里innerhtml中地图片# E! t2 d2 e7 U9 Z+ D* }
<script type=text/javascript> var el = document.createelement('div'); el.innerhtml = '<img src=1.jpg />'; //document.body.appendchild(el);</script>测试:test_8.html1 g, m6 c8 p7 d
结论:只有opera不会马上请求图片.
% U. c0 Y6 Z' h9 |1 K5 D3 ^注意:当添加到dom树上时,opera才会发送请求.
6 I9 C) S. p8 ?- J6 K( \ v* k- k L% a* q9 I" k6 Y# m" ]
更多网页制作信息请查看: 网页制作 |