網(wǎng)站圖片加載技術(shù)的設(shè)計(jì)與實(shí)現(xiàn)

項(xiàng)陽(yáng)陽(yáng)

（武漢職業(yè)技術(shù)學(xué)院 計(jì)算機(jī)技術(shù)與軟件工程學(xué)院，湖北 武漢 430074）

隨著現(xiàn)代科技的進(jìn)步，技術(shù)的發(fā)展，改變了人們的閱讀習(xí)慣。圖片作為最容易引起人類共鳴和最容易被理解的一種傳播媒介，被廣泛應(yīng)用于網(wǎng)頁(yè)設(shè)計(jì)中。圖片文件相對(duì)來(lái)說(shuō)比較大，對(duì)用戶的網(wǎng)絡(luò)要求比較高，如果一個(gè)頁(yè)面有多張圖片，在用戶打開的同時(shí)加載的話，需要較長(zhǎng)時(shí)間的數(shù)據(jù)傳輸，用戶就需要等待一段時(shí)間才能看到頁(yè)面內(nèi)容。研究表明網(wǎng)頁(yè)只有在2 s 內(nèi)打開用戶最為滿意，用戶能夠忍受的最長(zhǎng)等待時(shí)間是6～8 s［1］。因此縮短用戶等待時(shí)間是網(wǎng)頁(yè)開發(fā)者追求的目標(biāo)。處理頁(yè)面的圖片加載方式是縮短網(wǎng)頁(yè)加載時(shí)間，提高用戶滿意度的關(guān)鍵要點(diǎn)是考驗(yàn)前端開發(fā)工程師技術(shù)的難點(diǎn)。目前業(yè)界較成熟的圖片處理技術(shù)有3 種：懶加載、預(yù)加載、兩者結(jié)合形成的基于用戶行為的資源預(yù)加載。

1 懶加載的原理及實(shí)現(xiàn)

懶加載技術(shù)就是進(jìn)入頁(yè)面時(shí)并不加載全部的頁(yè)面內(nèi)容，尤其是圖片內(nèi)容，只加載第一屏內(nèi)容，當(dāng)用戶滾動(dòng)屏幕，圖片出現(xiàn)在屏幕視窗時(shí)再去加載。懶加載實(shí)現(xiàn)的原理是通過(guò)判斷圖片是否進(jìn)入可視窗口確定是否加載圖片，防止頁(yè)面一次性向服務(wù)器請(qǐng)求大量請(qǐng)求而導(dǎo)致服務(wù)器響應(yīng)變慢或者一次請(qǐng)求較多資源占用帶寬較多造成頁(yè)面卡頓或者崩潰等問(wèn)題。

典型的懶加載實(shí)現(xiàn)方式是先將img 標(biāo)簽的src 鏈接設(shè)為同一張小圖片，將真實(shí)的圖片地址存放在自定義屬性比如data-src 中，之后使用JS 監(jiān)聽瀏覽器滾動(dòng)事件，發(fā)生滾動(dòng)時(shí)判斷需要懶加載的圖片元素是否進(jìn)入可視窗口，進(jìn)入可視窗口時(shí)立即將自定義屬性data-src中存放的地址存儲(chǔ)到src 屬性中加載圖片。圖片不再是一次性的全部加載，而是隨著鼠標(biāo)的滾動(dòng)，一張張依次加載進(jìn)來(lái)，提高了網(wǎng)頁(yè)響應(yīng)速度，改善用戶體驗(yàn)［2］。

懶加載實(shí)現(xiàn)的關(guān)鍵代碼：

＜img src="test1.jpg" data-src="img1.jpg"＞

//監(jiān)聽滾動(dòng)函數(shù)

$（window）.on（'scroll'，function（） { //檢查是否出現(xiàn)在當(dāng)前可視窗口}）

//加載圖片

function showImg（$el）{$el.attr（'src'，$el.attr（'data-src'））；}

懶加載的優(yōu)點(diǎn)：

（1）懶加載對(duì)于圖片較多頁(yè)面很長(zhǎng)的業(yè)務(wù)場(chǎng)景很適用，可以減少無(wú)效資源的加載；

（2）顯著的提高頁(yè)面加載速度，又不下載多余的資源節(jié)省了流量；同時(shí)更少的圖片并發(fā)請(qǐng)求數(shù)也可以減輕服務(wù)器的壓力。

2 預(yù)加載的原理及實(shí)現(xiàn)

預(yù)加載就是提前加載圖片放到本地緩存中，當(dāng)用戶需要使用時(shí)，直接從緩存中讀取，相對(duì)于網(wǎng)絡(luò)讀取速度提高非常多，如果一張網(wǎng)頁(yè)中圖片占據(jù)比例較大，采用預(yù)加載可以實(shí)現(xiàn)圖片快速發(fā)布，提高用戶體驗(yàn)。實(shí)現(xiàn)預(yù)加載的方法比較多，可以使用CSS/JS 或者兩者組合使用，可以根據(jù)實(shí)際的場(chǎng)景設(shè)計(jì)合適的解決方案。下面給出一種常見的實(shí)現(xiàn)方式——通過(guò)CSS 實(shí)現(xiàn)預(yù)加載：將圖片放到窗口外元素上（或者隱藏元素上），在頁(yè)面的其他地方使用時(shí)，直接將img 標(biāo)簽的src 屬性設(shè)置為對(duì)應(yīng)元素的背景圖片地址，此時(shí)直接從緩存讀取，不需要再次加載，提高響應(yīng)速度［3］。關(guān)鍵實(shí)現(xiàn)代碼如下：

#preload01 {background：url （http：//test.com/image01.jpg）no-repeat -9999px -9999px；}

優(yōu)點(diǎn)：實(shí)現(xiàn)簡(jiǎn)單，不需要任何JS 代碼，效率高

缺點(diǎn)：用戶進(jìn)入頁(yè)面加載頁(yè)面其他內(nèi)容時(shí)圖片一起加載，增加了頁(yè)面的加載時(shí)間，頁(yè)面首屏的加載可能會(huì)產(chǎn)生響應(yīng)延時(shí)。

懶加載是當(dāng)圖片進(jìn)入可視窗口時(shí)加載，可能會(huì)產(chǎn)生短暫的延時(shí)；預(yù)加載可以減少該延時(shí)，但是用戶并非需要頁(yè)面上的全部?jī)?nèi)容，全部加載會(huì)浪費(fèi)帶寬或流量資源。如果將二者結(jié)合起來(lái)，即使用懶加載的省流量省資源，又能夠使用預(yù)加載無(wú)延時(shí)的良好體驗(yàn)，便形成基于用戶行為的資源預(yù)加載。

3 基于用戶行為的資源預(yù)加載實(shí)現(xiàn)

基于用戶行為的資源預(yù)加載實(shí)現(xiàn)：可以通過(guò)典型的頁(yè)面應(yīng)用選項(xiàng)卡頁(yè)面來(lái)詳細(xì)講解。

圖1 選項(xiàng)卡頁(yè)面

選項(xiàng)卡頁(yè)面是基于用戶點(diǎn)擊選項(xiàng)卡標(biāo)簽觸發(fā)切換效果，因此如果用戶未點(diǎn)擊 “選項(xiàng)卡2”，“選項(xiàng)卡3”按鈕，則對(duì)應(yīng)的選項(xiàng)卡內(nèi)容永遠(yuǎn)都看不到。在這鐘情況下后面兩個(gè)選項(xiàng)卡的內(nèi)容就沒(méi)必要提前預(yù)加載了。因此分析完頁(yè)面之后，需要對(duì)“選項(xiàng)卡1”進(jìn)行預(yù)加載，“選項(xiàng)卡2”和“選項(xiàng)卡3”進(jìn)行懶加載處理。懶加載的加載處理發(fā)生在用戶點(diǎn)擊選項(xiàng)卡按鈕之后，那么就會(huì)產(chǎn)生短暫的空白，過(guò)一會(huì)兒圖片才會(huì)出現(xiàn)，那么結(jié)合預(yù)加載的思想，是否可以進(jìn)行改進(jìn)呢？分析用戶點(diǎn)擊選項(xiàng)卡的行為，可以拆解為如下步驟：

mouseenter 選項(xiàng)卡-＞mouseover 按鈕-＞mousedown按鈕-＞產(chǎn)生點(diǎn)擊事件，如果用戶將鼠標(biāo)移到選項(xiàng)卡的時(shí)候產(chǎn)生mouseenter 或者mouseover 的時(shí)候，用戶將有極大概率點(diǎn)擊該選項(xiàng)卡按鈕，因此可以捕捉用戶的mouseenter 或者mouseover 行為提前預(yù)加載圖片。這樣就能夠?qū)屑虞d和預(yù)加載完美結(jié)合。實(shí)現(xiàn)關(guān)鍵代碼如下：

＜img src="img1.jpg" class="active"＞

/ 監(jiān)聽mouseenter 鼠標(biāo)移入行為預(yù)加載圖片tabs.on（{

mouseenter：function（）{

//src 換成真實(shí)地址

target.attr（'src'，target.attr（'data- src'））.removeAttr（'data- src'）}

}

}）；

4 結(jié) 語(yǔ)

本文主要描述現(xiàn)在業(yè)界常用的Web 前端處理網(wǎng)站圖片技術(shù)的三種實(shí)現(xiàn)方式：懶加載、預(yù)加載、基于用戶行為的資源預(yù)加載。網(wǎng)絡(luò)頁(yè)面日益復(fù)雜，內(nèi)容日益多樣，因此在網(wǎng)站的開發(fā)過(guò)程中，開發(fā)人員需要仔細(xì)分析用戶需求，設(shè)計(jì)代碼實(shí)現(xiàn)，根據(jù)實(shí)際需求選擇合適的技術(shù)實(shí)現(xiàn)。