请在主流浏览器中打开测试页面,在fiddler里查看http请求.( f7 w2 x1 B8 z6 k; ~9 W7 U6 M
1. 隐藏图片
$ h) e0 J( I& U" O<img src=1.jpg style=display: none />测试:test_1.html
; t E' l% s: H3 O8 m结论:只有opera不产生请求.7 m" `0 m4 m4 O( j. a6 W
注意:用visibility: hidden隐藏图片时,在opera下也会产生请求.
5 c* _0 V! O+ ]8 m& s3 m) m" ^9 y2. 重复图片) M+ h9 U/ q+ Q+ ]; U9 B
<img src=1.jpg /><img src=1.jpg />测试:test_2.html
- ~8 ^% X' `2 L L8 L" ^结论:所有浏览器都只产生一次请求 .
7 G2 J' C: T6 { e. n4 F* x7 E3. 重复背景4 p" c0 p1 Z8 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.html
4 v. a* \2 N/ L. f结论:所有浏览器都只产生一次请求.
) [0 O, ^' C7 T1 d5 a4. 不存在地元素地背景
0 k! H6 S7 v, ]3 r, m<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/ I8 R9 m Y* Y+ y8 z: o1 w$ c/ b
结论:背景仅在应用地元素在页面中存在时,才会产生请求.这对css框架来说,很有意义. N2 \2 Y6 ?& S( f
5. 隐藏元素地背景- e% W; o7 ~ P) }; A* A$ {
<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# S' \1 }! e! q e( i
结论:opera和firefox对于用display: none隐藏地元素背景,不会产生http请求.仅当这些元素非display: none时,才会请求背景图片.
8 G- M8 I1 \7 z \4 |. g6. 多重背景( x a- Z5 y7 w2 H5 k* m
<style type=text/css> .test1 { background: url(1.jpg); } .test1 { background: url(2.jpg); }</style><div class=test1>test1</div>测试:test_6.html8 C' F+ k+ H5 N! S s* B/ l
结论:除了基于webkit渲染引擎地safari和chrome,其它浏览器只会请求一张背景图.5 S- {5 X0 K: p$ U- T& B9 R- D. E2 P
注意:webkit引擎浏览器对背景图都请求,是因为支持css3中地多背景图.1 i6 A% R( I8 @
7. hover地背景加载
4 I0 F2 c5 [* `) W" r4 I. @<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
2 m2 S' ]- a9 ?4 S7 C& w: S A结论:触发hover时,才会请求hover状态下地背景.这会造成闪烁,因此经常放在同一张背景图里通过翻转来实现.- V' Y+ p$ u" D
注意:在图片no-cache地情况下,ie每次hover状态改变时,都会产生一次新请求.很糟糕.
/ M+ i. |, R B: q. n2009-05-13晚补充:上面地解释有误,更详细地解释请参考续篇.翻转技巧指地是sprite技术,例子:test_7b.html, 在ie6下不会产生闪烁.7 i0 F7 v6 x. B B! E. M& I
8. js里innerhtml中地图片4 D) }; _9 N6 K% |
<script type=text/javascript> var el = document.createelement('div'); el.innerhtml = '<img src=1.jpg />'; //document.body.appendchild(el);</script>测试:test_8.html
2 }6 f, z) ~- F* M- m, N结论:只有opera不会马上请求图片.0 `( \% _' N- k
注意:当添加到dom树上时,opera才会发送请求.
) o% o% Q; j3 ~* i7 j; Q$ H h6 X! V$ ], V6 g, R" N. g) X; j
更多网页制作信息请查看: 网页制作 |