Web中怎么加載圖片資源

Web中怎么加載圖片資源，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

瀏覽器的工作流程

要研究圖片資源的加載和渲染，我們先要了解瀏覽器的工作原理。以Webkit引擎的工作流程為例：

從上圖可看出，瀏覽器加載一個(gè)HTML頁(yè)面后進(jìn)行如下操作：

• 解析HTML —> 構(gòu)建DOM樹(shù)

• 加載樣式 —> 解析樣式 —> 構(gòu)建樣式規(guī)則樹(shù)

• 加載javascript —> 執(zhí)行javascript代碼

• 把DOM樹(shù)和樣式規(guī)則樹(shù)匹配構(gòu)建渲染樹(shù)

• 計(jì)算元素位置進(jìn)行布局

• 繪制

從上圖我們不能很直觀的看出圖片資源從什么時(shí)候開(kāi)始加載，下圖標(biāo)出圖片加載和渲染的時(shí)機(jī)：

• 解析HTML【遇到<img>標(biāo)簽加載圖片】 &mdash;> 構(gòu)建DOM樹(shù)

• 加載樣式 &mdash;> 解析樣式【遇到背景圖片鏈接不加載】 &mdash;> 構(gòu)建樣式規(guī)則樹(shù)

• 加載javascript &mdash;> 執(zhí)行javascript代碼

• 把DOM樹(shù)和樣式規(guī)則樹(shù)匹配構(gòu)建渲染樹(shù)【加載渲染樹(shù)上的背景圖片】

• 計(jì)算元素位置進(jìn)行布局

• 繪制【開(kāi)始渲染圖片】

圖片加載與渲染規(guī)則

頁(yè)面中不是所有的<img>標(biāo)簽圖片和樣式表背景圖片都會(huì)加載。

display:none

<style>  .img-purple {      background-image: url(../image/purple.png);  }  </style>  <img src="../image/pink.png" style="display:none">  <div class="img-purple" style="display:none"></div>

圖片資源請(qǐng)求如下：

設(shè)置了display:none屬性的元素，圖片不會(huì)渲染出來(lái)，但會(huì)加載。

原理

把DOM樹(shù)和樣式規(guī)則樹(shù)匹配構(gòu)建渲染樹(shù)時(shí)，會(huì)把可渲染元素上的所有屬性(如display:none屬性和background-image屬性)結(jié)合一起產(chǎn)出到渲染樹(shù)。

當(dāng)解析渲染樹(shù)時(shí)會(huì)加載<img>標(biāo)簽元素上的圖片，發(fā)現(xiàn)元素上有background-image屬性時(shí)會(huì)加載背景圖片。

當(dāng)繪制時(shí)發(fā)現(xiàn)元素上有display:none屬性，則不計(jì)算該元素位置，也不會(huì)繪制該元素。

<style>  .img-yellow {      background-image: url(../image/yellow.png);  }  </style>  <div style="display:none">      <img src="../image/red.png">      <div class="img-yellow"></div>  </div>

圖片資源請(qǐng)求如下：

設(shè)置了display:none屬性元素的子元素，樣式表中的背景圖片不會(huì)渲染出來(lái)，也不會(huì)加載;而<img>標(biāo)簽的圖片不會(huì)渲染出來(lái)，但會(huì)加載。

原理

正如上面所說(shuō)的，構(gòu)建渲染樹(shù)時(shí)，只會(huì)把可渲染元素產(chǎn)出到渲染樹(shù)，這就意味有不可渲染元素，當(dāng)匹配DOM樹(shù)和樣式規(guī)則樹(shù)時(shí)，若發(fā)現(xiàn)一個(gè)元素的屬性上有display:none，瀏覽器會(huì)認(rèn)為該元素的子元素是不可渲染的，因此不會(huì)把該元素的子元素產(chǎn)出到渲染樹(shù)上。

當(dāng)解析渲染樹(shù)時(shí)渲染樹(shù)上沒(méi)有設(shè)置了display:none屬性元素的子元素，因此不會(huì)加載該元素中子元素的背景圖片。

當(dāng)繪制時(shí)也因?yàn)殇秩緲?shù)上沒(méi)有設(shè)置了display:none屬性元素的子元素，因此該元素中子元素的背景圖片不會(huì)渲染出來(lái)。

重復(fù)圖片

.img-blue {      background-image: url(../image/blue.png);  }  <div class="img-blue"></div>  <img src="../image/blue.png">  <img src="../image/blue.png">

圖片資源請(qǐng)求如下：

頁(yè)面中多個(gè)<img>標(biāo)簽或樣式表中的背景圖片圖片路徑是同一個(gè)，圖片只加載一次。

原理

瀏覽器請(qǐng)求資源時(shí)，都會(huì)先判斷是否有緩存，若有緩存且未過(guò)期則會(huì)從緩存中讀取，不會(huì)再次請(qǐng)求。先加載的圖片會(huì)存儲(chǔ)到瀏覽器緩存中，后面再次請(qǐng)求同路徑圖片時(shí)會(huì)直接讀取緩存中的圖片。

不存在元素的背景圖片

.img-blue {      background-image: url(../image/blue.png);  }  .img-orange{      background-image: url(../image/orange.png);  }

圖片資源請(qǐng)求如下：

不存在元素的背景圖片不會(huì)加載。

原理

不存在的元素不會(huì)產(chǎn)出到DOM樹(shù)上，因此渲染樹(shù)上也不會(huì)有不存在的元素，當(dāng)解析渲染樹(shù)時(shí)無(wú)法解析不存在的元素，不存在的元素上的圖片自然不會(huì)加載也不會(huì)渲染。

偽類的背景圖片

.img-green {      background-image: url(../image/green.png);  }  .img-green:hover{      background-image: url(../image/red.png);  }

觸發(fā)hover前的圖片資源請(qǐng)求如下：

觸發(fā)hover后的圖片資源請(qǐng)求如下：

當(dāng)觸發(fā)偽類的時(shí)候，偽類樣式上的背景圖片才會(huì)加載。

原理

觸發(fā)hover前，DOM樹(shù)與樣式規(guī)則樹(shù)匹配的是無(wú)hover狀態(tài)選擇器.img-green的樣式，因此渲染樹(shù)上background-image屬性的值是url(../image/green.png)，解析渲染樹(shù)時(shí)加載的是green.png，繪制時(shí)渲染的也是green.png。

觸發(fā)hover后，因?yàn)?img-green:hover的優(yōu)先級(jí)比較高，因此DOM樹(shù)與樣式規(guī)則樹(shù)匹配的是有hover狀態(tài)選擇器.img-green:hover的樣式，渲染樹(shù)上background-image屬性的值是url(../image/red.png)，解析渲染樹(shù)時(shí)加載的是red.png，繪制時(shí)渲染的也是red.png。

應(yīng)用

占位圖

當(dāng)使用樣式表中的背景圖片作為占位符時(shí)，要把背景圖片轉(zhuǎn)為base64格式。這是因?yàn)楸尘皥D片加載的順序在標(biāo)簽后面，背景圖片可能會(huì)在<img>標(biāo)簽圖片加載完成后才開(kāi)始加載，達(dá)不到想要的效果。

預(yù)加載

很多場(chǎng)景里圖片是在改變或觸發(fā)狀態(tài)后才顯示出來(lái)的，例如點(diǎn)擊一個(gè)Tab后，一個(gè)設(shè)置display:none隱藏的父元素變?yōu)轱@示，這個(gè)父元素里的子元素圖片會(huì)在父元素顯示后才開(kāi)始加載;又如當(dāng)鼠標(biāo)hover到圖標(biāo)后，改變圖標(biāo)圖片，圖片會(huì)在hover上去后才開(kāi)始加載，導(dǎo)致出現(xiàn)閃一下這種不友好的體驗(yàn)。

在這種場(chǎng)景下，我們就需要把圖片預(yù)加載，預(yù)加載有很多種方式:

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2. 若是小圖標(biāo)，可以合并成雪碧圖，在改變狀態(tài)前就把所有圖標(biāo)都一起加載了。

3. 使用上文講到的，設(shè)置了display:none屬性的元素，圖片不會(huì)渲染出來(lái)，但會(huì)加載。把要預(yù)加載的圖片加到設(shè)置了display:none的元素背景圖或標(biāo)簽里。

4. 在javascript創(chuàng)建img對(duì)象，把圖片url設(shè)置到img對(duì)象的src屬性里。 

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。