lazyload.js是一款可以將圖片延遲載入網頁的JQuery套件，主要功能可以減少伺服器多餘的流量輸出/減輕伺服器負擔及提高使用者體驗。
那為什麼要使用lazyload.js讓圖片延遲加載到網頁裡面呢？
網頁中最吃資源的就是圖片，想像一下，一個頁面有10張圖假設一張圖片1MB，那這樣加載一個頁面的圖片就要花費10MB的流量去加載，所以有時候會在一些網站上看到一些情況，明明文字和樣式都已經出來了，可是圖片還是遲遲沒有顯示出來！因為圖片正在努力下載中啊。。
那lazyload.js 是怎麼實現延遲載入圖片的呢？？
它會依照用戶在滾動頁面時當用戶快要滾動到圖片時才開始跟伺服器請求這張圖片下來，然後即時顯示給用戶觀看，通常都會搭配一張loading 的gif圖檔做搭配讓用戶知道這邊等一下會出現一張圖片哦，請稍等。
那我們就來實作一下來看看怎麼做到圖片延遲加載吧！
安裝lazyload套件
先在<head></head>之間引入JQuery及lazyload.js。注意jQuery一定要先引入哦！
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="lazyload.min.js"></script>
</head>
lazyload使用方式
<body>
//針對要進行延遲加載的img代入 class="lazyload" 並且將data-src="這邊代入要加載的圖片路徑" (當滑鼠滾動到這張圖片時就會加載data-src="裡面的圖片進來囉")
<img class="lazyload" src="loading.gif(loading.gif圖片路徑)" data-src="要加載的圖片路徑" />
<script type="text/javascript">
//記得要在</body>前調用lazyload();針對img標籤有class="lazyload"的執行
$("img.lazyload").lazyload();
</script>
</body>
完成之後就會有下圖這種效果囉～快來實作看看吧！！
