图片HTTP请求的各种情况

1. 隐藏图片

<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: none" />
<img src="https://www.baidu.com/img/bd_logo1.png" style="visibility: hidden;" />

Chrome, Firefox, IE 11+, Edge 均会产生请求

2. 重复图片

<img src="https://www.baidu.com/img/bd_logo1.png" />  
<img src="https://www.baidu.com/img/bd_logo1.png" />  

所有浏览器都只产生一次请求 。

3. 重复背景

(1)

<style type="text/css">
.div1{ background: url('https://www.baidu.com/img/baidu_jgylogo3.gif') }
.div2{ background: url('https://www.baidu.com/img/baidu_jgylogo3.gif') }
</style>
<div class="div1">div1</div>
<div class="div2">div2</div>

所有浏览器都只产生一次请求。

(2)

<style type="text/css">
.div1{ background: url('https://www.baidu.com/img/baidu_jgylogo3.gif') }
.div1{ background: url('https://www.baidu.com/img/bd_logo1.png') }
</style>
<div class="div1">div1</div>

上一个被覆盖了，只请求第二个

4. 不存在的元素的背景

<style type="text/css">
.div1{ background: url('https://www.baidu.com/img/baidu_jgylogo3.gif') }
.div2{ background: url('https://www.baidu.com/img/bd_logo1.png') }   //div2不存在
</style>
<div class="div1">div1</div>

不存在的元素不产生图片请求

5. hover的背景加载

<style type="text/css">
a.text{ background: url('https://www.baidu.com/img/baidu_jgylogo3.gif')}
a.text:hover{ background: url('https://www.baidu.com/img/bd_logo1.png')}
</style>
<a href="#" class="text">text</a>

触发hover时，才会请求hover状态下的背景。不触发的话，只请求默认的背景图片。

6. 图片预加载

在Javascript 中加载图片

<script type="text/javascript">
var a = new Image();
a.src="https://www.baidu.com/img/baidu_jgylogo3.gif"
</script>

执行到的时候发出请求

总结

src属性引入的图片都会被加载
重复图片只加载一次
Opera浏览器有例外