发起图片请求的几种可能性(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有相关 ...
随机推荐
- [css]演示：纯CSS实现的右侧底部简洁悬浮效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- Android dialog 全屏
Android中让Dialog全屏: 一.在style中定义样式: <?xml version="1.0" encoding="utf-8"?> & ...
- mysql 5.7如何添加用户
MySQL5.7 添加用户.删除用户与授权 转自:https://www.cnblogs.com/xujishou/p/6306765.html mysql -uroot -proot MySQL5 ...
- Dcloud开发-- 打开蓝牙
这样打开APP就会直接提示是否要打开蓝牙: <script type="text/javascript"> mui.init(); mui.plusReady(func ...
- python中的configparser类
Python中有ConfigParser类,可以很方便的从配置文件中读取数据(如DB的配置,路径的配置),所以可以自己写一个函数,实现读取config配置. config文件的写法比较简单,[sect ...
- Centos7更改yum源与更新系统
[1] 首先备份 /etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/Cen ...
- CentOS7.4使用yum安装MySQL5.6
CentOS默认数据库为mariadb可以使用yum安装MySQL5.6 系统版本查看 下载yum源安装 wget http://dev.mysql.com/get/mysql-community-r ...
- rac数据库单连接报错ora-12537解决办法
1.现象如下: C:\Users\Administrator.DBA-PC>sqlplus sys/oracle@192.168.100.33:1521/orcl as sys dba SQL* ...
- Fatal error in launcher: Unable to create process using '"c:\python37\python3.exe" "C:\Python37\Scripts\pip3.exe" install opencv-python'
pip3.exe install opencv-python 报错: Fatal error in launcher: Unable to create process using '"c: ...
- htop 分析 进程对资源的消耗
[root@d ~]# htop -hhtop 2.2.0 - (C) 2004-2018 Hisham MuhammadReleased under the GNU GPL. -C --no-col ...