懶加載（延遲加載）：延遲加載圖片或符合某些條件時才加載某些圖片。

預加載：提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染。

兩種技術的本質：兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。

1.懶加載：

意義： 懶加載的主要目的是作為服務器前端的優化，減少請求數或延遲請求數。

實現方式：

1.第一種是純粹的延遲加載，使用setTimeOut或setInterval進行加載延遲。
2.第二種是條件加載，符合某些條件，或觸發了某些事件才開始異步下載。
3.第三種是可視區加載，即僅加載用戶可以看到的區域，這個主要由監控滾動條
 時正好能看到圖片。
 

2.預加載：

意義： 犧牲服務器前端性能，換取更好的用戶體驗，這樣可以使用戶的操作得到最快的反映。

實現方式：

實現預載的方法非常多，可以用CSS(background)、JS(Image)、HTML(<img />)都可以。
常用的是new Image();設置其src來實現預載，再使用onload方法回調預載完成事件。
只要瀏覽器把圖片下載到本地，同樣的src就會使用緩存，這是最基本也是最實用的預載方法。
當Image下載完圖片頭後，會得到寬和高，因此可以在預載前得到圖片的大小(方法是用記時器輪循寬高變化)。

【轉】前端懶加載以及預加載