圖片懶加載與預加載

預加載

經常使用的是new Image();，設置其src來實現預載，再使用onload方法回調預載完成事件。

function loadImage(url, callback)
{
　　var img = new Image(); //建立一個Image對象，實現圖片的預下載
　　img.src = url;
　　if (img.complete)
　　{ // 若是圖片已經存在於瀏覽器緩存，直接調用回調函數
　　　　callback.call(img);
　　　　return; // 直接返回，不用再處理onload事件
　　}
　　img.onload = function ()
　　{ //圖片下載完畢時異步調用callback函數。
　　　　callback.call(img);//將回調函數的this替換爲Image對象 ，若是你直接用img.width的時候，圖片尚未徹底下載下來
　　};
}

 

 

測試用例：

function imgLoaded()
{
　　alert(this.width);
}
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>

 

 

 

當圖片加載過一次之後，若是再有對該圖片的請求時，因爲瀏覽器已經緩存住這張圖片了，不會再發起一次新的請求，而是直接從緩存中加載過來。對於 firefox和safari，它們視圖使這兩種加載方式對用戶透明，一樣會引發圖片的onload事件，而ie和opera則忽略了這種同一性，不會引發圖片的onload事件

 

使用img標籤或者經過標籤的background-image屬性均可以實現圖片的預加載。可是爲了不初次載入過多圖片影響體驗。通常最好在文檔渲染完成之後再加載（使用window.onload等）。

 

場景：

若是某一個效果須要更換背景圖片，那麼圖片會臨時去加載，這樣會出現圖片須要一段時間才能顯示出來，用戶體驗就會變差，因此圖片須要預加載。好比照片牆，滾動圖片什麼，須要無縫顯示圖片的，以前加載好圖片纔不至於要顯示下一張圖片的時候臨時去拉圖片致使顯示圖片過慢。

 

 

懶加載

意義： 懶加載的主要目的是做爲服務器前端的優化，緩解服務器前端壓力，一次性請求次數減小或延遲請求。

 

實現方式：

 

    1.第一種是純粹的延遲加載，使用setTimeOut或setInterval進行加載延遲.

 

    2.第二種是條件加載，符合某些條件，或觸發了某些事件纔開始異步下載。

 

    3.第三種是可視區加載，即僅加載用戶能夠看到的區域，這個主要由監控滾動條來實現，通常會在距用戶看到某圖片前必定距離遍開始加載，這樣能保證用戶拉下時正好能看到圖片。

 

 

圖片沒拉回來也會觸發onerror事件

 

 

應用場景推薦連接

利用簡潔的圖片預加載組件提高h5移動頁面的用戶體驗

javascript圖片懶加載與預加載的分析

「懶」的妙用——淺析圖片懶加載技術

Javascript圖片預加載詳解