圖片懶加載與預加載

1.懶加載

認識一個新的東西，那麼就從what、why開始。即想要了解圖片懶加載技術，那麼先了解什麼是懶加載？爲什麼需要用到懶加載？

1.1什麼是懶加載?

懶加載又稱延遲加載。當訪問一個頁面的時候，需要先把img元素或者其他元素的背景圖先用一張默認的圖片代替（佔位圖），這樣子

瀏覽器渲染頁面的時候就只需請求一次。當圖片出現在瀏覽器可視區域的時候，才設置圖片的真實路徑，把圖片顯示出來。

1.2爲什麼要使用圖片懶加載？

當頁面中圖片的數量多到一定數量的時候，並且圖片大小比較大，比如各種商場網站，圖片素材網等等。如果在頁面一加載的時候就

加載全部圖片，顯然會影響網站加載速度和加大服務器負擔，而且用戶體驗也必然不好，那麼這時候可以採用懶加載。

1.3 懶加載具體實現原理

頁面中的img元素之所以會發送http請求的原因是設置了src屬性，否則瀏覽器就不會發送請求去下載這個圖片。首先在頁面中把所有

的圖片用一張佔位圖進行佔位，並且在元素下設置data-src自定義屬性，存放圖片的真實路徑，當需要用到的時候取出該真實路徑動

態添加給src。

2.預加載

2.1.什麼是預加載？

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

2.2 爲什麼要使用預加載？

當頁面中圖片比較大的時候，頁面加載的時候會出現該區域空白的效果或者看到圖片正在慢慢地加載出來，爲了提高用戶體驗，需

要把這些圖片提前加載到緩存中，當用戶一打開頁面的時候，這些圖片就會快速的呈現出來，獲得更好的用戶體驗效果。

2.3實現方式有哪些？

方法1：使用css和JavaScript實現預加載

方法2：只使用JavaScript實現預加載

方法3：使用ajax實現預加載

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

3.懶加載和預加載的區別以及具體實現方式

兩種技術的行爲是相反的，一個是提前加載，一個是延遲加載或者不加載。懶加載對於服務器來說是有好的，可以緩解一定的壓

力。而預加載則相反，會增加服務器的負擔。

懶加載具體實現方式：

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

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

3.第三種是可視區加載，即僅加載用戶可以看到的區域，這個主要由監控滾動條來實現，一般會在距用戶看到某圖片前一定距離遍

開始加載，這樣能保證用戶拉下時正好能看到圖片。

預加載具體實現方式：

實現預載的方法非常多，比如：用CSS和JavaScript實現預加載；僅使用JavaScript實現預加載；使用Ajax實現預加載。

常用的是new Image();設置其src來實現預載，再使用onload方法回調預載完成事件。只要瀏覽器把圖片下載到本地，同樣的src就會

使用緩存，這是最基本也是最實用的預載方法。當Image下載完圖片頭後，會得到寬和高，因此可以在預載前得到圖片的大小(方法

是用記時器輪循寬高變化。