返回列表 发新帖

实测图片的http请求

636.6k 10
swmozowtfl 发表于 2015-7-12 13:26:46|湖北 | 查看全部 阅读模式
请在主流浏览器中打开测试页面,在fiddler里查看http请求.
* c8 n' s( }# u+ t' _1. 隐藏图片* g: n  K1 Q6 Z) f- c% f
<img src=1.jpg style=display: none />测试:test_1.html( e6 M# W- o' k  m* b4 R
结论:只有opera不产生请求.
% T" ~& [! ~) F' y8 e注意:用visibility: hidden隐藏图片时,在opera下也会产生请求." W( p7 q: x, h; ~. L* b
2. 重复图片
3 i: Z3 c3 i8 t1 q7 z6 c! D! T<img src=1.jpg /><img src=1.jpg />测试:test_2.html& m- V0 J& r  E6 f
结论:所有浏览器都只产生一次请求 .8 Z9 z( q! h5 }4 W
3. 重复背景. |2 ]6 D8 x9 P; j7 Y8 i
<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
8 l& C* T; j- L. s结论:所有浏览器都只产生一次请求.- e# ?, H& U( w$ x" z" ?
4. 不存在地元素地背景
; n% R( z) {& v+ r& ]<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
3 U5 z; g  P) z  m. A结论:背景仅在应用地元素在页面中存在时,才会产生请求.这对css框架来说,很有意义.
  u$ n2 y  l% E5. 隐藏元素地背景
4 m! P7 P1 T1 R3 F* `) M0 \. 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.html5 c8 E2 L+ G3 w0 H, d9 G& S
结论:opera和firefox对于用display: none隐藏地元素背景,不会产生http请求.仅当这些元素非display: none时,才会请求背景图片.( M* @: r9 A5 o  w" t
6. 多重背景/ m+ T3 ^8 Z8 v) \7 S0 v. p8 j% i
<style type=text/css> .test1 { background: url(1.jpg); } .test1 { background: url(2.jpg); }</style><div class=test1>test1</div>测试:test_6.html
( U; }3 n4 P, |0 J1 j* T0 C" c' q1 E结论:除了基于webkit渲染引擎地safari和chrome,其它浏览器只会请求一张背景图.$ E, B- D. t4 w5 |- U% C
注意:webkit引擎浏览器对背景图都请求,是因为支持css3中地多背景图.
( y: }" [9 z5 M; r( f7. hover地背景加载
6 ]5 F5 B- d& m. |" n( }5 ^<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
8 z1 _3 C3 g# I/ F2 ?7 C/ ^" J! D结论:触发hover时,才会请求hover状态下地背景.这会造成闪烁,因此经常放在同一张背景图里通过翻转来实现.
; t0 l  H9 V1 f4 P7 K7 A! O注意:在图片no-cache地情况下,ie每次hover状态改变时,都会产生一次新请求.很糟糕.  f- x4 K& d. v/ r  e" v
2009-05-13晚补充:上面地解释有误,更详细地解释请参考续篇.翻转技巧指地是sprite技术,例子:test_7b.html, 在ie6下不会产生闪烁.+ R3 `; |! O' t+ N# w' b$ A) e0 m
8. js里innerhtml中地图片8 z5 I  m5 \% I/ k( g! c
<script type=text/javascript> var el = document.createelement('div'); el.innerhtml = '<img src=1.jpg />'; //document.body.appendchild(el);</script>测试:test_8.html
( R1 H+ v8 d" \  I4 {: P结论:只有opera不会马上请求图片.( {. |4 |$ g8 k# {6 e1 W2 ]. R
注意:当添加到dom树上时,opera才会发送请求.
6 u3 {+ k2 D% _. f0 _4 ?) \5 q2 T' s" `% y2 q1 v& A; a
更多网页制作信息请查看: 网页制作

回复|共 10 个

gevaemaidovef 发表于 2015-10-27 15:24:34|美国 | 查看全部
卧虎藏龙里面半天云的人物个性。由此而言,作者是性格是完善的,想必经历过家庭的其 乐融融,也经历过种种人伦惨剧吧,把作者的创作潜质激发的淋漓尽致。
GoodyFouppy 发表于 2015-10-27 15:24:22|美国 | 查看全部
看到本ID的这位童鞋,我看你气度不凡,谈吐间隐隐有王者之气,日后必有一番作为! 内有“加关注”三字,你就顺手把它点了吧。相得准,我分文不收;相不准,你也好回来找我。
bqtklouu 发表于 2015-10-27 15:25:04|日本 | 查看全部
想骂你.却不知道从何骂起.
wwdu926a 发表于 2015-10-27 15:24:42|美国 | 查看全部
呵呵  我傻了‘~~哈哈
effoggikeftor 发表于 2015-10-27 15:24:28|美国 | 查看全部
明天我给发过来
seazvyt 发表于 2015-10-30 19:47:54|伊朗 | 查看全部
楼主,你要继续努力啊!你是bbs的希望啊!你是网络文学的希望啊!你是整个网络界的希望文学界的希望啊!你是整个人类的希望啊!你是整个太阳系的希望啊!你是整个异次元空间的希望啊!
gevaemaidovef 发表于 2015-10-30 19:46:56|智利 | 查看全部
既然你诚心诚意地发贴了,那我就大发慈悲地回复你。为了防止此贴被秒沉,为了维护此楼的繁荣!贯彻爱与真实的邪恶,可爱又迷人的顶贴角色! 穿梭在贴吧之间的顶贴队!喵~就是这样
seazvyt 发表于 2015-10-30 19:47:41|美国 | 查看全部
这篇帖子构思新颖,题材独具匠心,段落清晰,情节诡异,跌宕起伏,主线分明,引人入胜,平淡中显示出不凡的文学功底,可谓是字字珠玑,句句经典,是我辈应当学习之典范(不好意思回错帖了
Mqokjdvq 发表于 2015-10-30 19:47:16|美国 | 查看全部
我不是来为楼主呐喊加油的,也不是对楼主进行围堵攻击的。
Acropozelan 发表于 2015-10-30 19:47:42|INNA | 查看全部
这日子没法过了....

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 得知互动-专注Ai与站长技术交流社区-Ai交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表