发起图片请求的几种可能性(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有相关 ...
随机推荐
- 代码片段，lucene基本操作(基于lucene4.10.2)
1.最基本的创建索引: @Test public void testIndex(){ try { Directory directory = FSDirectory.open(new File(LUC ...
- wamp安装和基础配置
一 下载地址 二 安装 三 修改默认网站目录 四 修改数据库密码 一 下载地址 wamp百度软件中心 wamp官方下载地址 二 安装 windows环境下wampserver的配置教程——超级详细 w ...
- ATDD和TDD的区别是什么？
最近看到一个新名词"ATDD",全称"Acceptance Test Driven Development ",中文称"验收测试驱动开发". ...
- 【模块化开发】------requireJS的基本使用------【巷子】
前言 为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了.,下面是某个网站的js引用情况 虽然代码的复用度提升了,但是缺点也体现了出来 缺点: ...
- Yii 的session 实现返回上上页面
学习session的页面:http://www.yiichina.com/doc/guide/2.0/runtime-sessions-cookies 关键摘要: $session = Yii::$a ...
- HDU 5618 Jam's problem again（三维偏序，CDQ分治，树状数组，线段树）
Jam's problem again Time Limit: 5000/2500 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Othe ...
- Oracle系统结构之修改oracle内存参数
Linux主机16g内存,修改oracle数据库内存参数: 1.编辑/etc/fstab文件:针对tmpfs行将defaults改成defaults,size=12g(千万注意格式,不能出现错误) 修 ...
- day13（JSTL和自定义标签&MVC模型&javaweb三层框架）
day13 JSTL标签库(重点) 自定义标签(理解) MVC设计模式(重点中的重点) Java三层框架(重点中的重点) JSTL标签库 1 什么是JSTL JSTL是apache对EL表达式的扩 ...
- 【Python】如何取到input中的value值？
练习:取到下方链接下所有海贼王的下载链接. # coding=utf-8 from selenium import webdriver from time import sleep import ke ...
- 每日算法之三十五：Wildcard Matching
模式匹配的实现,'?'代表单一字符,'*'代表随意多的字符.写代码实现两个字符串是否匹配. Implement wildcard pattern matching with support for ' ...