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會產生是否對圖片進行載入。
利用他們這樣特徵。
那麼我們可以對網站圖片進行效能上的提升。

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！