发起图片请求的几种可能性(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有相关 ...
随机推荐
- TextureMerger1.6.6 三：Bitmap Font的制作和使用
BitmapFont主要用于特殊字体在游戏中的使用. 比如我想使用方正剪纸字体,但是没加载方正剪纸.ttf字体时,egret是没法使用这种字体的. 或者美工制作了效果拔群的0123456789数字字体 ...
- 无法远程访问Mysql
1.故障状态 [root@server02 ~]# mysql -utuser -h192. -p Enter password: ERROR (HY000): Can't connect to My ...
- 表格table列宽度控制<colgroup>
<colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化. 通过使用 <colgroup> 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式. ...
- 自定义Realm解析
自定义Realm解析---------------------------------------> /* * Copyright 2005-2013 shopxx.net. All right ...
- POJ 2240 Arbitrage【Bellman_ford坑】
链接: http://poj.org/problem?id=2240 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22010#probl ...
- Webservice实践（七）CXF 与Spring结合+tomcat发布
上一节介绍了如何使用CXF 来发布服务,但是没有介绍使用web 容器来发布,很多项目需要用tomcat 这样的容器来发布.另外本节将介绍CXF 与spring 结合的方法. 一 目标: 1.利用spi ...
- python采用pika库使用rabbitmq总结，多篇笔记和示例（转）
add by zhj:作者的几篇文章参考了Rabbitmq的Tutorials中的几篇文章. 原文:http://www.01happy.com/python-pika-rabbitmq-summar ...
- 【Maven学习】Nexus OSS私服仓库的备份与迁移
背景 在上一篇博客 [Maven学习]Nexus OSS私服仓库的安装和配置 中,我们已经在机房搭建好了新的Nexus OSS私服仓库.下面是两个版本的Nexus OSS私服仓库的对比图. 老的Nex ...
- day17（JDBC入门&jdbcUtils工具介绍）
day17 JDBC整体思维导图 JDBC入门 导jar包:驱动! 加载驱动类:Class.forName("类名"); 给出url.username.password,其中url ...
- 从零开始写JavaWeb框架（第二章节）
这一章太多了...好累,不想写那么细了,就做一点总结吧. package org.smart4j.chapter2.controller; import java.io.IOException; im ...