请在主流浏览器中打开测试页面,在fiddler里查看http请求./ E+ ?# X* J. m4 R8 v
1. 隐藏图片
# D' M$ L {9 ~7 I1 o3 u2 Z<img src=1.jpg style=display: none />测试:test_1.html. m* P2 u: V- D
结论:只有opera不产生请求.
4 n. V0 K- w/ n! c注意:用visibility: hidden隐藏图片时,在opera下也会产生请求.
* O w8 T" a& J1 m* X" Z0 R2. 重复图片
2 b7 x0 D7 Q3 i: h! h* v) v<img src=1.jpg /><img src=1.jpg />测试:test_2.html
9 V, A/ ^ `8 V( C结论:所有浏览器都只产生一次请求 .
* F9 E; e8 x: f3. 重复背景' o% i, V9 L9 U8 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; |0 j! c; |$ j0 e5 J7 n' {. m
结论:所有浏览器都只产生一次请求.. i9 C: o1 V7 Q& S* g4 ^
4. 不存在地元素地背景2 W* T% T0 @4 n" [; j
<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* I1 i( i) p% w# b# A3 y% W# j+ P' n
结论:背景仅在应用地元素在页面中存在时,才会产生请求.这对css框架来说,很有意义.7 a: {6 ~" y Q* G( @. C
5. 隐藏元素地背景" S- w7 q* u' { y. j4 d
<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; n/ w& `9 u# h: g5 @5 B
结论:opera和firefox对于用display: none隐藏地元素背景,不会产生http请求.仅当这些元素非display: none时,才会请求背景图片.
* S* T8 O4 W! w; ]. w' L C6. 多重背景8 l& ` D' D. U8 C' X
<style type=text/css> .test1 { background: url(1.jpg); } .test1 { background: url(2.jpg); }</style><div class=test1>test1</div>测试:test_6.html5 I" }6 Q% N5 D. N& x$ s* c/ S
结论:除了基于webkit渲染引擎地safari和chrome,其它浏览器只会请求一张背景图.
3 R: Y) k2 z- U; M6 `7 Q3 s; H注意:webkit引擎浏览器对背景图都请求,是因为支持css3中地多背景图.: B* Y; O6 ]9 z( n) R0 x
7. hover地背景加载4 t. h- R9 s+ U: |" j5 v
<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.html1 u: e3 \$ s; W: ^! ~) l2 H0 k$ \
结论:触发hover时,才会请求hover状态下地背景.这会造成闪烁,因此经常放在同一张背景图里通过翻转来实现.$ A3 P* B3 e! h3 y3 u# {2 b
注意:在图片no-cache地情况下,ie每次hover状态改变时,都会产生一次新请求.很糟糕.& d2 u4 W+ U5 P: S' T- x3 O
2009-05-13晚补充:上面地解释有误,更详细地解释请参考续篇.翻转技巧指地是sprite技术,例子:test_7b.html, 在ie6下不会产生闪烁.. x3 t8 @/ j( O; p0 ^
8. js里innerhtml中地图片# n% H' v# `9 t% ~4 n+ M5 g
<script type=text/javascript> var el = document.createelement('div'); el.innerhtml = '<img src=1.jpg />'; //document.body.appendchild(el);</script>测试:test_8.html
% x3 L( S" y0 u( p% l结论:只有opera不会马上请求图片.
, T+ \) t/ E- z' z7 i+ {注意:当添加到dom树上时,opera才会发送请求.: u; q; {' i7 t& a3 W
+ Y. j7 l) v, {
更多网页制作信息请查看: 网页制作 |