預加載
常用的是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事件
應用場景推薦鏈接