懶加載lazyload

什麼是懶加載

懶加載就是當你作滾動到頁面某個位置，而後再顯示當前位置的圖片，這樣作能夠減小頁面請求。

懶加載：主要目的是做爲服務器前端的優化，減小請求數或延遲請求數，一些圖片很是多的網站中很是有用，在瀏覽器可視區域外的圖片不會被載入，直到用戶將頁面滾動到它們所在的位置才加載，這樣對於含有不少 圖片的比較長的網頁來講，能夠加載的更快，而且還能節省服務器帶寬。
實現方式:

1.第一種是純粹的延遲加載，使用setTimeOut或setInterval進行加載延遲.
2.第二種是條件加載，符合某些條件，或觸發了某些事件纔開始異步下載。
3.jQuery插件中也有插件來實現該功能。
4.第三種是可視區加載，即僅加載用戶能夠看到的區域，這個主要由監控滾動條來實現，通常會在距用戶看到某圖片前必定距離遍開始加載，這樣能保證用戶拉下時正好能看到圖片。
這時候不得不提的是預加載，由於這兩個是對立的，你們容易混淆 。

什麼是預加載

預加載：提早加載圖片，預先加載到瀏覽器，當用戶須要查看時可直接從本地緩存中渲染

實現方式： 能夠用CSS(background)、JS(Image)、HTML()均可以。經常使用的是new Image();設置其src來實現預載，再使用onload方法回調預載完成事件。只要瀏覽器把圖片下載到本地，一樣的src就會使用緩存，這是最基本也是最實用的預載方法。當Image下載完圖片頭後，會獲得寬和高，所以能夠在預載前獲得圖片的大小(方法是用記時器輪循寬高變化)。
實例代碼：

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對象 
}; 
};

javascript圖片預加載和延時加載的區別主要體如今圖片傳輸到客戶端的時機上，都是爲了提高用戶體驗的,延時加載又叫懶加載。

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

綜合以上鋪墊以後，進入正題，就是lazyload的使用

lazyload的使用

參考文檔
參考文檔
1.它依賴於jquery,因此你要先引入jquery,在html代碼結束以後

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

2.html圖片調用方法
爲圖片加入樣式lazy，圖像的地址必須付諸data-original屬性。給懶加載的圖像的特定類

<img class="lazy" data-original="img/01.jpg">
<img class="lazy" data-original="img/02.jpg">
<img class="lazy" data-original="img/03.jpg">
<img class="lazy" data-original="img/04.jpg">
<img class="lazy" data-original="img/05.jpg">
<img class="lazy" data-original="img/06.jpg">

注意:您必須設置圖像尺寸不管是做爲width和height屬性或CSS。不然插件可能沒法正常工做。
還有一點必須注意的是，若是想達到在窗口向下滾動時圖片一張張下載的效果，最好給圖片設置足夠的高度,若是高度不夠，圖片就會所有下載下來，那麼這個插件就沒有效果了

3.js出始化lazyload並設置圖片顯示方式

<script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({effect: "fadeIn"});
  });
</script>

在圖片中也能夠不使用 class="lazy"，初始化時使用： `` $("img").lazyload({effect: "fadeIn"}); ``` 以上是最基本的，具體看參考資料。這些都是看的參考資料，哈哈