dispaly結合背景圖片會提高加載性能

「這是我參與更文挑戰的第1天，活動詳情查看： 更文挑戰」

1.display的常見現象

咱們不少人都知道，display能夠讓元素實現隱藏或者顯示。
或者讓行級元素變成塊級元素。
對它的認識也是比較準確的。
若是一個元素使用了display:none;
那麼該元素將會隱藏，沒法進行點擊，屏幕設置將會沒法訪問。
可是今天個人意外發現， display: none;並非咱們想象的那樣簡單。
它是一個有"故事的屬性"
如今咱們來看一看它究竟有哪些咱們不知道的現象。
複製代碼

2. 在谷歌瀏覽器中什麼狀況使用 display 圖片不會進行加載

若是圖片的父級元素或者圖片自己使用了display:none，
而且圖片使用background:url("")的方式引入圖片
那麼圖片將不會進行網絡請求，也就不會進行加載。
不信的話能夠來看一下下面這一段斷碼
複製代碼

<p> 若是圖片的父級元素或者圖片自己使用了display:none</p>
<p> 使用background:url("")這樣的方式引入圖片</p>
<p> 那麼圖片將不會進行網絡請求，也就不會進行加載</p>
<div class="father-box">
    <div class="bgimng"></div>
</div>
複製代碼

<style>
    .father-box {
        display: none;
    }

    .bgimng {
        background: url("img/bgg.png");
    }
</style>
複製代碼

根據上面的動態圖片。
咱們發現刷新頁面確實不會對圖片進行網絡請求。
咱們剛剛說： display: none;
不會對圖片進行網絡請求有兩個條件
條件1：父級元素或者圖片自己使用display: none;
條件2：圖片以background: url("") 的方式插入圖片
這兩個條件是缺一不可的。
不信咱們來一一驗證。
複製代碼

3.不使用display圖片會進行請求嗎?

圖片不使用display(這樣就不符合條件1)
圖片依舊使用background: url("") 的方式插入圖片(符合條件2)
看看是否會進行網絡請求。
咱們發現對圖片進行了網絡加載
複製代碼

<p>圖片不使用display；</p>
<p>這樣就不符合條件1</p>
<p> 圖片依舊使用background: url("") 的方式插入圖片</p>
<p> 圖片進行了網絡加載</p>
<div class="father-box">
    <div class="bgimng"></div>
</div>
複製代碼

.bgimng {
    background: url("img/bgg.png");
}
複製代碼

4.不使用背景圖的方式插入圖片會進行網絡加載嗎？

圖片不是以background: url("") 的方式插入圖片
而是以img標籤的方式。那麼圖片將會在全部的瀏覽器上被進行網絡請求。
咱們能夠來看一下
複製代碼

<p>圖片圖片不是以background: url("") 的方式插入圖片</p>
<p>而是以img標籤的方式。那麼圖片將會在全部的瀏覽器上被進行網絡請求。</p>
<p>會進行網絡請求</p>
<div class="father-box">
    <img src="./img/bgg.png">
</div>
複製代碼

<style>
    .bgimng {
        display: none;
    }
</style>
複製代碼

咱們知道在網頁中顯示圖片有以背景圖的方式插入。
還有以img標籤的形式進行展現。
可是他們配合dispaly會產生是否對圖片進行加載。
利用他們這樣特徵。
那麼咱們能夠對網站圖片進行性能上的提高。
複製代碼