请在主流浏览器中打开测试页面,在fiddler里查看http请求.
7 o# b( @4 Z& L( f1. 隐藏图片; u; q! Z# ~$ e4 x0 z3 r
<img src=1.jpg style=display: none />测试:test_1.html0 M0 U: g1 p6 G" Y0 V
结论:只有opera不产生请求.
' q6 `' s5 {) R: |. R注意:用visibility: hidden隐藏图片时,在opera下也会产生请求.7 i/ H# o: I" i# [. A
2. 重复图片
! U0 k- F1 K+ i<img src=1.jpg /><img src=1.jpg />测试:test_2.html
% n$ t, |9 ^/ t0 ~9 }$ `结论:所有浏览器都只产生一次请求 .
5 f' ^( H1 Z) {3. 重复背景6 I1 M, V/ L; P4 h, x" K0 W; I u
<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 v+ Q5 R( \* Z- Z; W
结论:所有浏览器都只产生一次请求.8 b, @$ o& f) h$ W% Y! P- T0 f
4. 不存在地元素地背景
0 N1 X* g1 T. b: J4 d<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
. [6 _5 G! ^7 e+ x9 P' j- f结论:背景仅在应用地元素在页面中存在时,才会产生请求.这对css框架来说,很有意义.: f( ^( K& ]) T
5. 隐藏元素地背景9 C! K- r5 x# p! @4 Z
<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
: v8 B4 g, o) j$ u1 p- T5 h结论:opera和firefox对于用display: none隐藏地元素背景,不会产生http请求.仅当这些元素非display: none时,才会请求背景图片.
$ T0 V& f) i; w! C# S" w6. 多重背景
8 e* A4 G/ Q3 Y1 p<style type=text/css> .test1 { background: url(1.jpg); } .test1 { background: url(2.jpg); }</style><div class=test1>test1</div>测试:test_6.html; t4 }( s4 z1 P
结论:除了基于webkit渲染引擎地safari和chrome,其它浏览器只会请求一张背景图.
- @3 F$ ~0 k, S: Q5 s: z注意:webkit引擎浏览器对背景图都请求,是因为支持css3中地多背景图., H6 E# z) U! K
7. hover地背景加载5 F1 L- P5 U: U* g
<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
- A( r2 W, |% _( m y9 w% Z( x结论:触发hover时,才会请求hover状态下地背景.这会造成闪烁,因此经常放在同一张背景图里通过翻转来实现./ Y+ M3 P W) t( _4 H0 f
注意:在图片no-cache地情况下,ie每次hover状态改变时,都会产生一次新请求.很糟糕.
- X6 ]8 u! x1 O6 x5 |! M2009-05-13晚补充:上面地解释有误,更详细地解释请参考续篇.翻转技巧指地是sprite技术,例子:test_7b.html, 在ie6下不会产生闪烁.
7 D7 D6 y& Z' d6 s; n! V1 |5 \8. js里innerhtml中地图片5 S" [$ X, M" L M$ _
<script type=text/javascript> var el = document.createelement('div'); el.innerhtml = '<img src=1.jpg />'; //document.body.appendchild(el);</script>测试:test_8.html
7 K% M2 G- l$ z& |6 O结论:只有opera不会马上请求图片.
; ~! L1 i+ a' [9 R4 B% [注意:当添加到dom树上时,opera才会发送请求.
( L8 N% u+ h A
8 w1 V% [6 K, i E更多网页制作信息请查看: 网页制作 |