请在主流浏览器中打开测试页面,在fiddler里查看http请求.3 N$ P2 ~: c7 k( d% v% U) ~' U
1. 隐藏图片
0 J/ i0 o& G/ Y! e% l<img src=1.jpg style=display: none />测试:test_1.html
9 V8 E2 q0 z* o3 M; x0 R6 p7 W结论:只有opera不产生请求., z4 [' Q" S' P+ U$ V. g. A
注意:用visibility: hidden隐藏图片时,在opera下也会产生请求.2 c- C3 r( Q e- J( {9 c* u
2. 重复图片& ^2 T3 l7 w1 E% ~
<img src=1.jpg /><img src=1.jpg />测试:test_2.html& i6 u- T! ~6 d4 j
结论:所有浏览器都只产生一次请求 .
6 d, j" B/ z4 Y5 D' y7 t, @3. 重复背景! x% i4 x" A+ t" Z5 E
<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
2 ?9 V P7 f5 ^结论:所有浏览器都只产生一次请求.1 }8 s) y! e9 o, R7 R! `, q
4. 不存在地元素地背景4 ^" J- j+ L N, `0 _+ @3 @
<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 d! G/ C' w! k' y
结论:背景仅在应用地元素在页面中存在时,才会产生请求.这对css框架来说,很有意义.$ c% j2 [! e% `5 E
5. 隐藏元素地背景
6 ^% T0 i, E' [. n) g' E<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.html2 ~, J1 l# E# d' @/ I% M+ V5 I7 W
结论:opera和firefox对于用display: none隐藏地元素背景,不会产生http请求.仅当这些元素非display: none时,才会请求背景图片.
) {* d( a6 s3 c/ M# n+ Y) n4 H6. 多重背景0 M$ N! h+ X2 c: S8 y
<style type=text/css> .test1 { background: url(1.jpg); } .test1 { background: url(2.jpg); }</style><div class=test1>test1</div>测试:test_6.html
p, r! ?9 k; G. M4 Z" Z C结论:除了基于webkit渲染引擎地safari和chrome,其它浏览器只会请求一张背景图.+ Z- P* g8 h6 M
注意:webkit引擎浏览器对背景图都请求,是因为支持css3中地多背景图.; N& V, V5 w9 D# l/ l4 `+ c, T% c
7. hover地背景加载1 R4 c( I, L* u# \, y
<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
9 s0 P8 L( J; a结论:触发hover时,才会请求hover状态下地背景.这会造成闪烁,因此经常放在同一张背景图里通过翻转来实现.
$ K' J# j4 l2 g% {! D7 I Z, G9 z; Q y注意:在图片no-cache地情况下,ie每次hover状态改变时,都会产生一次新请求.很糟糕.. B9 Q3 D' m6 ?/ U8 a! V
2009-05-13晚补充:上面地解释有误,更详细地解释请参考续篇.翻转技巧指地是sprite技术,例子:test_7b.html, 在ie6下不会产生闪烁.! V/ I/ B" X5 n0 u
8. js里innerhtml中地图片& T7 A! ], g& d8 b4 i4 H# Z, z6 i
<script type=text/javascript> var el = document.createelement('div'); el.innerhtml = '<img src=1.jpg />'; //document.body.appendchild(el);</script>测试:test_8.html
7 r, P& K+ S& r; _. N结论:只有opera不会马上请求图片.5 { n& u7 ^2 q6 }: U) j. I; l
注意:当添加到dom树上时,opera才会发送请求.3 Q# `, X8 N& {
/ j4 S% Y+ v# k4 x2 @7 K更多网页制作信息请查看: 网页制作 |