网页测试源代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浏览器图片加载</title>
<style type="text/css">
.no_show{
display: none;
}
</style>
<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".domReady_no_show").css("display","none"); var el = document.createElement('div');
el.innerHTML = '<img src="http://i.mmcdn.cn/simba/img/T1MeV0FbpcXXb1upjX.jpg" />';//到这个阶段,浏览器就开始产生图片请求。
// document.body.appendChild(el); new Image().src="http://img01.taobaocdn.com/tps/i1/T14Tx1FmFfXXXRAFgs-110-135.png";//到这个阶段,浏览器也产生图片请求。
})
</script>
</head>
<body>
<div>display:none;的图片会不会加载?会!<img class="no_show" src="http://img03.taobaocdn.com/tps/i3/T1BfxMFdNhXXcr_tT7-490-170.jpg" /></div>
<div>DOM结构预备的时候,display:none;的图片会不会加载?会!<img class="domReady_no_show" src="http://img01.taobaocdn.com/tps/i1/T1BYX3FXdfXXcr_tT7-490-170.jpg"></div>
<img nosrc="http://img04.taobaocdn.com/tps/i4/T1L005Fa4cXXXRAFgs-110-135.png" />
别忘了查看附件
</body>
</html>

玉伯博客的讲解:

请在主流浏览器中打开测试页面,在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状态改变时,都会产生一次新请求。很糟糕。

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

终于到总结了

对于隐藏图片和隐藏元素的背景,Opera不会产生请求。

对于隐藏元素的背景,Firefox也不会产生请求。

对于尚未插入DOM树的img元素,Opera不会产生请求。

基于webkit引擎的Safari和Chrome,支持多背景图。

其它情景,所有主流浏览器保持一致。

对图片请求的处理上,个人觉得Opera走在前列。

番外

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

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

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

//---------------------------2014/1/17

如果你在html里面已经加载了图片,再修改img的src,浏览器不会产生请求。

发起图片请求的几种可能性(webkit内核)的更多相关文章

  1. 老李分享:curl发起https请求

    老李分享:curl发起https请求 在POPTEST上课的过程中,我们需要本地模拟https请求来完成性能测试,我们用curl来实现,curl是利用URL语法在命令行方式下工作的开源文件传输工具,使 ...

  2. Node.js模拟发起http请求从异步转同步的5种方法

    使用Node.js模拟发起http请求很常用的,但是由于Node模块(原生和第三方库)提供里面的方法都是异步,对于很多场景下应用很麻烦,不如同步来的方便.下面总结了几个常见的库API从异步转同步的几种 ...

  3. [Java] 两种发起POST请求方法,并接收返回的响应内容的处理方式

    1.利用apache提供的commons-httpclient-3.0.jar包 代码如下: /** * 利用HttpClient发起POST请求,并接收返回的响应内容 * * @param url ...

  4. java中两种发起POST请求,并接收返回的响应内容的方式  (转)

    http://xyz168000.blog.163.com/blog/static/21032308201162293625569/ 2.利用java自带的java.net.*包下提供的工具类 代码如 ...

  5. nodejs之get/post请求的几种方式

    最近一段时间在学习前端向服务器发送数据和请求数据,下面总结了一下向服务器发送请求用get和post的几种不同请求方式: 1.用form表单的方法:(1)get方法 前端代码: <form act ...

  6. jquey的 ajax请求的几种方式

    在jquery中,提供了集中方法来进行ajax操作 一.$.get(url,[data],[callback]) 向服务器发起get操作. 说明:url为请求地址,data为请求数据的列表(json对 ...

  7. php 使用curl发起https请求

    今天一个同事反映,使用curl发起https请求的时候报错:“SSL certificate problem, verify that the CA cert is OK. Details: erro ...

  8. 使用 HttpRequester 更方便的发起 HTTP 请求

    使用 HttpRequester 更方便的发起 HTTP 请求 Intro 一直感觉 .net 里面(这里主要说的是 .net framework 下)发送 HTTP 请求的方式用着不是特别好用,而且 ...

  9. NET MVC全局异常处理(一) 【转载】网站遭遇DDoS攻击怎么办 使用 HttpRequester 更方便的发起 HTTP 请求 C#文件流。 Url的Base64编码以及解码 C#计算字符串长度,汉字算两个字符 2019周笔记(2.18-2.23) Mysql语句中当前时间不能直接使用C#中的Date.Now传输 Mysql中Count函数的正确使用

    NET MVC全局异常处理(一)   目录 .NET MVC全局异常处理 IIS配置 静态错误页配置 .NET错误页配置 程序设置 全局异常配置 .NET MVC全局异常处理 一直知道有.NET有相关 ...

随机推荐

  1. TextureMerger1.6.6 三:Bitmap Font的制作和使用

    BitmapFont主要用于特殊字体在游戏中的使用. 比如我想使用方正剪纸字体,但是没加载方正剪纸.ttf字体时,egret是没法使用这种字体的. 或者美工制作了效果拔群的0123456789数字字体 ...

  2. 无法远程访问Mysql

    1.故障状态 [root@server02 ~]# mysql -utuser -h192. -p Enter password: ERROR (HY000): Can't connect to My ...

  3. 表格table列宽度控制<colgroup>

    <colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化. 通过使用 <colgroup> 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式. ...

  4. 自定义Realm解析

    自定义Realm解析---------------------------------------> /* * Copyright 2005-2013 shopxx.net. All right ...

  5. POJ 2240 Arbitrage【Bellman_ford坑】

    链接: http://poj.org/problem?id=2240 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22010#probl ...

  6. Webservice实践(七)CXF 与Spring结合+tomcat发布

    上一节介绍了如何使用CXF 来发布服务,但是没有介绍使用web 容器来发布,很多项目需要用tomcat 这样的容器来发布.另外本节将介绍CXF 与spring 结合的方法. 一 目标: 1.利用spi ...

  7. python采用pika库使用rabbitmq总结,多篇笔记和示例(转)

    add by zhj:作者的几篇文章参考了Rabbitmq的Tutorials中的几篇文章. 原文:http://www.01happy.com/python-pika-rabbitmq-summar ...

  8. 【Maven学习】Nexus OSS私服仓库的备份与迁移

    背景 在上一篇博客 [Maven学习]Nexus OSS私服仓库的安装和配置 中,我们已经在机房搭建好了新的Nexus OSS私服仓库.下面是两个版本的Nexus OSS私服仓库的对比图. 老的Nex ...

  9. day17(JDBC入门&jdbcUtils工具介绍)

    day17 JDBC整体思维导图 JDBC入门 导jar包:驱动! 加载驱动类:Class.forName("类名"); 给出url.username.password,其中url ...

  10. 从零开始写JavaWeb框架(第二章节)

    这一章太多了...好累,不想写那么细了,就做一点总结吧. package org.smart4j.chapter2.controller; import java.io.IOException; im ...