有关图片http请求的总结

发表于

现在是每天都在进步呀，只要有进步就是一件令人兴奋的事情。

了解图片的http请求机制，这样对前端图片的优化，有很好的帮助。有错误的地方还望指正，大家一起进步。

1.对于隐藏（display:none）图片和隐藏（display:none）的背景图片，Opera不会产生请求。（Opera在元素非display:none;时就会进行请求。）

1
2
3
4
5
<style>
#bg1{display:none;background:url("../img/1.jpg");}
</style>
<img src="1.jpg" style="display:none;" />
<div id="bg1"></div>

2.对于隐藏（display:none）背景图片，Firefox也不会产生请求（代码同上）。

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

1
2
3
4
5
<script type="text/javascript">   
    var element = document.createElement('div');   
    element.innerHTML = '<img src="1.jpg" />';   
    //document.body.appendChild(element);   
</script>

4.对于重复引用的img图片或是背景图片，所有浏览器都只产生一次请求 。

1
2
3
4
5
6
7
8
9
10
11
12
13
//重复引用的img图片
<img src="1.jpg">
<img src="1.jpg">
<img src="1.jpg">
//重复引用背景图片
<style>
#pic1{background:url("../img/1.jpg");}
#pic2{background:url("../img/1.jpg");}
#pic3{background:url("../img/1.jpg");}
</style>
<div id="pic1"></div>
<div id="pic2"></div>
<div id="pic3"></div>

5.对于不存在的元素背景仅在应用的元素在页面中存在时，才会产生请求。

1
2
#pic1{background:url("../img/1.jpg");}
#pic2{background:url("../img/2.jpg");}/* 页面中没有id为pic2的元素，不产生http请求*/

6.hover的情况下加载背景图片（触发hover时才会请求hover状态下的背景图片）

1
2
#pic1 { background: url("../img/1.jpg"); }   
#pic1:hover { background: url("../img/2.jpg"); } /*hover状态下发出http请求*/

7.多重背景图片的引用

1
2
3
4
5
6
7
8
9
10
////这一条就要看你要如何书写代码了。
//代码一：
#pic1{background:url("../img/1.jpg");}
#pic1{background:url("../img/2.jpg");}
//这段代码，只会请求"../img/2.jpg"这张图片，原因是，代码在预编译的时候
//就会把后面的代码覆盖了前面的代码，在执行时就只请求了2.jpg的图片。
//代码二：
#pic1{ background-image:url("../img/1.jpg"),url("../img/2.jpg");} 
//对于支持css3中多背景图的浏览器，对所有的图片都会进行请求。

如果你是个小白，到这里你应该对图片的http请求有个很好的了解了，接着就可以怎样进行图片的优化了。