足球游戏_中国足彩网¥体育资讯$

实测图片的http请求
来源:易贤网 阅读:1006 次 日期:2014-09-12 15:08:17
温馨提示:易贤网小编为您整理了“实测图片的http请求”,方便广大网友查阅!

请在主流浏览器中打开测试页面,在fiddler里查看http请求.

1. 隐藏图片

<img src="/1.jpg" style="display: none" />测试:test_1.html

结论:只有opera不产生请求.

注意:用visibility: hidden隐藏图片时,在opera下也会产生请求.

2. 重复图片

<img src="/1.jpg" /><img src="/1.jpg" />测试:test_2.html

结论:所有浏览器都只产生一次请求 .

3. 重复背景

<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. 不存在地元素地背景

<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

结论:背景仅在应用地元素在页面中存在时,才会产生请求.这对css框架来说,很有意义.

5. 隐藏元素地背景

<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

结论:opera和firefox对于用display: none隐藏地元素背景,不会产生http请求.仅当这些元素非display: none时,才会请求背景图片.

6. 多重背景

<style type="text/css"> .test1 { background: url(/1.jpg); } .test1 { background: url(/2.jpg); }</style><div class="test1">test1</div>测试:test_6.html

结论:除了基于webkit渲染引擎地safari和chrome,其它浏览器只会请求一张背景图.

注意:webkit引擎浏览器对背景图都请求,是因为支持css3中地多背景图.

7. hover地背景加载

<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

结论:触发hover时,才会请求hover状态下地背景.这会造成闪烁,因此经常放在同一张背景图里通过翻转来实现.

注意:在图片no-cache地情况下,ie每次hover状态改变时,都会产生一次新请求.很糟糕.

2009-05-13晚补充:上面地解释有误,更详细地解释请参考续篇.翻转技巧指地是sprite技术,例子:test_7b.html, 在ie6下不会产生闪烁.

8. js里innerhtml中地图片

<script type="text/javascript"> var el = document.createelement('div'); el.innerhtml = '<img src="/1.jpg" />'; //document.body.appendchild(el);</script>测试:test_8.html

结论:只有opera不会马上请求图片.

注意:当添加到dom树上时,opera才会发送请求.

9. 图片预加载

最常用地是js方案:

中国足彩网信息请查看IT技术专栏

中国足彩网信息请查看网页制作
上一篇:CSS3圆角详解
易贤网手机网站地址:实测图片的http请求
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标