关于display：none；的图片加载

1、如果元素有{display: none;}的样式的话，标签上的图片会被请求加载，但是不会被渲染

例子：

<style>
.img-container {
background-image: url(../imgs/icon1.png);
}
</style>

<div class="img-container" style="display:none"></div>
<img src="../imgs/icon2.png" style="display:none">

其中icon1.png和icon2.png会请求后端进行加载，但是因为样式属性不会计算该元素的布局

2、如果父元素有{display: none;}的样式的话，子元素在样式表中的背景图片既不会渲染也不会加载，但是标签上的图片会被加载不会被渲染

例子：

 
<style>
.img-container {
background-image: url(../imgs/icon1.png);
}
</style>

<div style="display:none">
<div class="img-container"></div>
<img src="../imgs/icon2.png">
</div>

3、伪类背景图片只在触发伪类时候才会请求加载（因此建议请求雪碧图—即一堆小图汇总到一张大图上，这样不会有UI跳跃感）

4、已经请求过的相同图片不会重复请求

5、不存在的元素，即时样式表里有写，也不会请求加载