關於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、不存在的元素，即時樣式表裏有寫，也不會請求加載