網站圖片加載技術的設計與實現

項陽陽

（武漢職業技術學院 計算機技術與軟件工程學院，湖北 武漢 430074）

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

1 懶加載的原理及實現

懶加載技術就是進入頁面時并不加載全部的頁面內容，尤其是圖片內容，只加載第一屏內容，當用戶滾動屏幕，圖片出現在屏幕視窗時再去加載。懶加載實現的原理是通過判斷圖片是否進入可視窗口確定是否加載圖片，防止頁面一次性向服務器請求大量請求而導致服務器響應變慢或者一次請求較多資源占用帶寬較多造成頁面卡頓或者崩潰等問題。

典型的懶加載實現方式是先將img 標簽的src 鏈接設為同一張小圖片，將真實的圖片地址存放在自定義屬性比如data-src 中，之后使用JS 監聽瀏覽器滾動事件，發生滾動時判斷需要懶加載的圖片元素是否進入可視窗口，進入可視窗口時立即將自定義屬性data-src中存放的地址存儲到src 屬性中加載圖片。圖片不再是一次性的全部加載，而是隨著鼠標的滾動，一張張依次加載進來，提高了網頁響應速度，改善用戶體驗［2］。

懶加載實現的關鍵代碼：

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

//監聽滾動函數

$（window）.on（'scroll'，function（） { //檢查是否出現在當前可視窗口}）

//加載圖片

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

懶加載的優點：

（1）懶加載對于圖片較多頁面很長的業務場景很適用，可以減少無效資源的加載；

（2）顯著的提高頁面加載速度，又不下載多余的資源節省了流量；同時更少的圖片并發請求數也可以減輕服務器的壓力。

2 預加載的原理及實現

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

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

優點：實現簡單，不需要任何JS 代碼，效率高

缺點：用戶進入頁面加載頁面其他內容時圖片一起加載，增加了頁面的加載時間，頁面首屏的加載可能會產生響應延時。

懶加載是當圖片進入可視窗口時加載，可能會產生短暫的延時；預加載可以減少該延時，但是用戶并非需要頁面上的全部內容，全部加載會浪費帶寬或流量資源。如果將二者結合起來，即使用懶加載的省流量省資源，又能夠使用預加載無延時的良好體驗，便形成基于用戶行為的資源預加載。

3 基于用戶行為的資源預加載實現

基于用戶行為的資源預加載實現：可以通過典型的頁面應用選項卡頁面來詳細講解。

圖1 選項卡頁面

選項卡頁面是基于用戶點擊選項卡標簽觸發切換效果，因此如果用戶未點擊 “選項卡2”，“選項卡3”按鈕，則對應的選項卡內容永遠都看不到。在這鐘情況下后面兩個選項卡的內容就沒必要提前預加載了。因此分析完頁面之后，需要對“選項卡1”進行預加載，“選項卡2”和“選項卡3”進行懶加載處理。懶加載的加載處理發生在用戶點擊選項卡按鈕之后，那么就會產生短暫的空白，過一會兒圖片才會出現，那么結合預加載的思想，是否可以進行改進呢？分析用戶點擊選項卡的行為，可以拆解為如下步驟：

mouseenter 選項卡-＞mouseover 按鈕-＞mousedown按鈕-＞產生點擊事件，如果用戶將鼠標移到選項卡的時候產生mouseenter 或者mouseover 的時候，用戶將有極大概率點擊該選項卡按鈕，因此可以捕捉用戶的mouseenter 或者mouseover 行為提前預加載圖片。這樣就能夠將懶加載和預加載完美結合。實現關鍵代碼如下：

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

/ 監聽mouseenter 鼠標移入行為預加載圖片tabs.on（{

mouseenter：function（）{

//src 換成真實地址

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

}

}）；

4 結 語

本文主要描述現在業界常用的Web 前端處理網站圖片技術的三種實現方式：懶加載、預加載、基于用戶行為的資源預加載。網絡頁面日益復雜，內容日益多樣，因此在網站的開發過程中，開發人員需要仔細分析用戶需求，設計代碼實現，根據實際需求選擇合適的技術實現。