实测图片的HTTP请求

所属分类: 网页制作 / 应用技巧 阅读数: 1438
收藏 0 赞 0 分享

请在主流浏览器中打开测试页面,在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方案:

复制代码
代码如下:

<script type="text/javascript"> new Image().src = '1.jpg'; new Image().src = '2.jpg';</script>在无JS支持的环境下,可以采用隐藏元素来预加载:
<img src="1.jpg" style="visibility: hidden; height: 0; width: 0" />测试:test_9.html

终于到总结了

1.对于隐藏图片和隐藏元素的背景,Opera不会产生请求。
2.对于隐藏元素的背景,Firefox也不会产生请求。
3.对于尚未插入DOM树的img元素,Opera不会产生请求。
4.基于webkit引擎的Safari和Chrome,支持多背景图。
5.其它情景,所有主流浏览器保持一致。
对图片请求的处理上,个人觉得Opera走在前列。

番外

1. 用Fiddler监控Opera时,如果是本地服务器,需要在Opera的代理服务器设置里,将本地服务器勾选上。

2. 查看HTTP请求数,还有一个万无一失的方法是,直接查看Apache的access.log文件。

3. 我的Firefox对于重复图片和重复背景,会产生重复请求。禁用了所有扩展,问题依旧。有知详情者,还望告知。

更多精彩内容其他人还在看

网页设计技巧:iframe自适应高度的问题

所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe
收藏 0 赞 0 分享

网页色彩对比与调和技巧分享

在对比状态下,色彩相互作用与单一色彩所带给人的感觉不一样,这种现象是由视觉残影引起的。当我们长时间注视某一彩色图像之后,再看白色背景时,眼前会出现色相、明度关系大体相仿的补色图像
收藏 0 赞 0 分享

网页色彩性质的分类

任何颜色都可以使用三原色——红、绿、蓝组合而成,三原色中只有红色是暖色,所以要判断作品颜色的冷暖,可以依据红色成分的多少而定。色调主要由明度与彩度组合而成,用来表示颜色的状态
收藏 0 赞 0 分享

使用Photoshop 制作网页线框图简单实用

这篇文章向大家介绍一套免费的Photoshop 线框图套件,这个线框图套件中包括通知、图片和视频,表单字段,标题,段落,项目符号列表,导航,广告横幅和普通网站的元素,如:搜索框,电子邮件注册表单等等
收藏 0 赞 0 分享

CSS使用技巧总结

偶尔看到一篇CSS常用技巧的总结文章,本人整理了一下,晒出来和大家分享,希望可以帮助你们
收藏 0 赞 0 分享

Web设计师如何制作Retina显屏设备的图片

到目前为止,我们知道苹果设备中支持Retina屏幕技术的有“iPhone”、“iPod”、“iPad”和“Macbook Pro”,这些设备能为用户呈现更细腻、平滑和高质量的图片效果,提高了用户的视觉体验。做为一名Web设计师如何为你的网站创建这些适合Retina显屏设备的图片呢
收藏 0 赞 0 分享

JPG,GIF及PNG各类型的图片格式详细解说

大家都知道网页上面的图像一般用jpg、gif和png这几种格式,他们有什么区别以及在什么场合下使用进行详细介绍看了下面的内容后你可能会有了自己的结论
收藏 0 赞 0 分享

组件化的前端开发流程详细说明

做前端的同学都知道,做的页面多了,东西就会乱,因此我们需要统一一个开发流程,开发流程的好坏,直接影响着页面开发的效率,间接影响游戏的时间为了更好的开发,我们做了一下总结
收藏 0 赞 0 分享

我们在囧途之UI工程师职业感慨

我是一名还不算特别优秀的UI工程师;这个要先说明一下UI不是美工,美工是以图片方案设计为主的岗位,而UI是指用户交互体验的设计
收藏 0 赞 0 分享

分享8款提高网页设计出色的CSS工具

当一个人需要编辑或修改网站设计,CSS发挥着重要的作用;今天就给大家分享8款非常出色的CSS工具,这些工具都是很出名的,能够解决开发当中常见的棘手问题,希望对你开发有所帮助
收藏 0 赞 0 分享
查看更多