发起图片请求的几种可能性(webkit内核)
网页测试源代码：
<!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内核)的更多相关文章
- 老李分享：curl发起https请求
老李分享:curl发起https请求 在POPTEST上课的过程中,我们需要本地模拟https请求来完成性能测试,我们用curl来实现,curl是利用URL语法在命令行方式下工作的开源文件传输工具,使 ...
- Node.js模拟发起http请求从异步转同步的5种方法
使用Node.js模拟发起http请求很常用的,但是由于Node模块(原生和第三方库)提供里面的方法都是异步,对于很多场景下应用很麻烦,不如同步来的方便.下面总结了几个常见的库API从异步转同步的几种 ...
- [Java] 两种发起POST请求方法，并接收返回的响应内容的处理方式
1.利用apache提供的commons-httpclient-3.0.jar包 代码如下: /** * 利用HttpClient发起POST请求,并接收返回的响应内容 * * @param url ...
- java中两种发起POST请求，并接收返回的响应内容的方式 （转）
http://xyz168000.blog.163.com/blog/static/21032308201162293625569/ 2.利用java自带的java.net.*包下提供的工具类 代码如 ...
- nodejs之get/post请求的几种方式
最近一段时间在学习前端向服务器发送数据和请求数据,下面总结了一下向服务器发送请求用get和post的几种不同请求方式: 1.用form表单的方法:(1)get方法 前端代码: <form act ...
- jquey的 ajax请求的几种方式
在jquery中,提供了集中方法来进行ajax操作 一.$.get(url,[data],[callback]) 向服务器发起get操作. 说明:url为请求地址,data为请求数据的列表(json对 ...
- php 使用curl发起https请求
今天一个同事反映,使用curl发起https请求的时候报错:“SSL certificate problem, verify that the CA cert is OK. Details: erro ...
- 使用 HttpRequester 更方便的发起 HTTP 请求
使用 HttpRequester 更方便的发起 HTTP 请求 Intro 一直感觉 .net 里面(这里主要说的是 .net framework 下)发送 HTTP 请求的方式用着不是特别好用,而且 ...
- 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有相关 ...
随机推荐
- spring+springMVC+Mybatis 中使用@Transcational方式管理事务的配置方法
springMVC 中,事务通常都在service层控制,当然controller层也可以用事务,只要配置配对,但通常不建议直接在controller层配事务,controller的作用是管理参数以及 ...
- CH601后缀数组【Trie树】
内含字典树创建及查询模板 1601 前缀统计 0x10「基本数据结构」例题 描述 给定N个字符串S1,S2...SN,接下来进行M次询问,每次询问给定一个字符串T,求S1-SN中有多少个字符串是T的前 ...
- StartUML-类图
- HDU_2888_Check Corners
Check Corners Time Limit: 2000/10000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- python之sys.stdout、sys.stdin以及设置打印到日志文件等
转自:https://www.cnblogs.com/BigFishFly/p/6622784.html python之sys.stdout.sys.stdin 转自:http://www.cnblo ...
- flask中Flask()和Blueprint() flask中的g、add_url_rule、send_from_directory、static_url_path、static_folder的用法
1.Blueprint()在蓝本注册函数register_blueprint()中,第一个参数为所注册的蓝本名称.当我们在应用对象上注册一个蓝图时,需要指定一个url_prefix关键字 参数(这个参 ...
- Mybatis三剑客之mybatis-generator配置
mybatis插件在这里: 然后把generatorConfig.xml文件放在resources下: <?xml version="1.0" encoding=" ...
- C#字母转换成数字/数字转换成字母 - ASCII码转换
字母转换成数字 byte[] array = new byte[1]; //定义一组数组arrayarray = System.Text.Encoding.ASCII.GetBytes(strin ...
- Visual Studio Code常用设置
Visual Studio Code常用设置 • 自动保存设置 ▶ 文件(F) -> 首选项(P) -> 用户设置(U) ▶ 将"files.autoSave": &q ...
- rails性能优化
1,使用Unicorn或者Thin服务器替代默认的webrick.2,静态资源压缩合并,放到云存储上.3,同时可以使用rails的Turbolinks,使用js替换title和body,但也带来了js ...