話說前頭：
上次寫了一篇webpack的學習心得，webpack能做到提升前端的性能，其模塊打包最終生成一個或少量的文件能夠減少對服務端的請求。除此之外，本次的圖片懶加載（當然不僅限於圖片，還可以有視頻，flash等）也是一種優化前端性能的方式。使用懶加載可以想要看圖片時才加載圖片，而不是一次性加載所有的圖片，從而在一定程度從減少服務端的請求。
懶加載介紹：
-
通俗介紹：懶加載怎么個懶法，就是你不想看就不給你看，我也懶得加載出來，懶得去請求。通俗的說就是你不要就不給你，怎么地。舉個栗子，比如在進入某個頁面的時候，它會有許多的圖片，有些圖片可能在下面，當我們點進頁面但沒有滑動下去或沒看完整個頁面，那么下面的圖片就會"沒用"，加載了也白加載，而且還降低了網頁的加載速度。因此用懶加載能當滾動到可視區域時才加載當前的圖片。
-
原理：圖片的加載是由src的值引起，當對src賦值時瀏覽器就會請求圖片資源，基於這個，可以利用html5屬性data-XXX來保存圖片的路徑，當我們需要加載圖片的時候才將data-xxx的值賦予src，醬就能實現圖片的按需加載，也就是懶加載了。
-
優點：提高前端性能，圖片在需要的時候才加載，減輕服務的負擔，提高頁面的加載速度，能夠減少帶寬。
懶加載實現方式:
1.使用jquery-lazyload.js，jQuery的插件用於懶加載使用，需要依賴jQuery。
2.使用echo.js：專門用於實現懶加載。
-- jquery-lazyload.js 實現方式：
1.引入：在HTML中引入jQuery和jQuery-lazyload，如：
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/jquery.lazyload.min.js"></script>2.圖片中不使用src屬性，因為使用src屬性后就會默認發送請求請求圖片，使用data-original代替如：
<img class="lazy" data-original="images/p1.jpg" style="margin-top:500px" height="300">3.添加jQuery代碼：
<script type="text/javascript"> $(function() { $("img.lazy").lazyload(); }) </script>-- jquery-lazyload.js的參數:
1.threshold :設置Threshold參數來實現滾到距離其xx px時就加載。如：
$(function() { $("img.lazy").lazyload({ threshold :100 }); })2.placeholder :為某一圖片路徑.此圖片用來占據將要加載的圖片的位置,待圖片加載時,占位圖則會隱藏,比如放一些等待加載的圖片來優化用戶體驗效果。
$(function() { $("img.lazy").lazyload({ placeholder: "images/loading.gif" }); })3.event ：觸發定義的事件時，圖片才開始加載（此處click代表點擊圖片才開始加載，還有mouseover，sporty,foobar(…)）
$(function(){ $("img.lazy").lazyload({ event : "click" }); })4.effects ：圖片顯示時的效果，默認是show。
$(function(){ $("img.lazy").lazyload({ effects:"fadeIn" }); })5.container :值為某容器.lazyload默認在拉動瀏覽器滾動條時生效,這個參數可以讓你在拉動某DIV的滾動條時依次加載其中的圖片
$(function(){ $("img.lazy").lazyload({ container: $("#container") }); })6.failure_limit ：一般用於當頁面中圖片不連續時使用，滾動頁面的時候, Lazy Load 會循環為加載的圖片. 在循環中檢測圖片是否在可視區域內，插件默認情況下在找到第一張不在可見區域的圖片時停止循環。如：
$(function(){ $("img.lazy").lazyload({ failure_limit : 20 }); })這里設為20表示插件找到 20 個不在可見區域的圖片時才停止搜索。
7.skip_invisible :為了提升性能，插件默認忽略隱藏的圖片；如果想要加載隱藏圖片.設置skip_invisible為false;
$(function(){ $("img.lazy").lazyload({ skip_invisible : false }); })-- echojs實現方式：
-
引入：在HTML中引入jQuery和jQuery-lazyload，如:
<script type="text/javascript" src="js/echo.min.js"></script> -
圖片中的src使用data-echo代替如:
<img class="lazy" data-echo="images/p1.jpg" style="margin-top:500px" height="300"> -
添加js代碼:
echo.init({ //離可視區域多少像素的圖片可以被加載 offset: 500, //圖片延時多少毫秒加載 throttle: 1000 });
-- echo只有兩個可選參數：
- offset：離可視區域多少像素的圖片可以被加載
- throttle：圖片延時多少毫秒加載
最后說幾句:
- 上述的懶加載實現方式都是人家實現好的，畢竟人家已經做好就不去重復造輪子，直接用人家會比較放心，因為大家都在用。
- jquery-lazyload插件的功能比較多，echojs雖然功能少但也夠用，而且體積小，所以根據需求對兩者取舍。
- 別人做好但也要去了解人家的如何去做，原理有了，我自己也嘗試去做，寫得還不是很好。這兩個方式對於一些頁面圖片懶加載已經夠用，但是對於輪播圖的加載還是不夠理想。
- 遇到的一些問題:
1.在滾動輪播圖片中，首次不能加載還沒有滾出來的圖片。
2.想實現點擊下一張輪播圖才去加載那張圖片。
以上所說的這些還需要繼續研究研究，正在尋求一些好的方法。