懶加載和預加載

1.什麼是懶加載？

懶加載也就是延遲加載。
當訪問一個頁面的時候，先把img元素或是其餘元素的背景圖片路徑替換成一張大小爲1*1px圖片的路徑（這樣就只需請求一次，俗稱佔位圖），只有當圖片出如今瀏覽器的可視區域內時，才設置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶加載。

2.懶加載的原理是什麼？

頁面中的img元素，若是沒有src屬性，瀏覽器就不會發出請求去下載圖片，只有經過javascript設置了圖片路徑，瀏覽器纔會發送請求。
懶加載的原理就是先在頁面中把全部的圖片統一使用一張佔位圖進行佔位，把正真的路徑存在元素的「data-url」屬性裏，要用的時候就取出來，再設置；

3.懶加載的實現步驟？

1)首先，不要將圖片地址放到src屬性中，而是放到其它屬性(data-original)中。
2)頁面加載完成後，根據scrollTop判斷圖片是否在用戶的視野內，若是在，則將data-original屬性中的值取出存放到src屬性中。
3)在滾動事件中重複判斷圖片是否進入視野，若是進入，則將data-original屬性中的值取出存放到src屬性中。

4.懶加載的優勢是什麼？

頁面加載速度快、能夠減輕服務器的壓力、節約了流量,用戶體驗好

 

二、預加載

1.什麼是預加載？

提早加載圖片，當用戶須要查看時可直接從本地緩存中渲染

2.爲何要使用預加載？

圖片預先加載到瀏覽器中，訪問者即可順利地在你的網站上衝浪，並享受到極快的加載速度。這對圖片畫廊及圖片佔據很大比例的網站來講十分有利，它保證了圖片快速、無縫地發佈，也可幫助用戶在瀏覽你網站內容時得到更好的用戶體驗。

3.實現預加載的方法有哪些？

方法一：用CSS和JavaScript實現預加載
方法二：僅使用JavaScript實現預加載
方法三：使用Ajax實現預加載

詳見：http://web.jobbole.com/86785/