圖片懶加載：jquery && jquery-lazyload

圖片懶加載是一種前端性能優化方案：隨著視圖區的滾動，加載剩下的圖片，這樣當滾動條沒有滾動到下面的時候，圖片不加載，減少資源浪費

原本：<img src="images/img1.jpg" >

懶加載：<img class="lazy" data-original="images/img1.jpg" >

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery-lazyload.min.js"></script>

<script>

　　$(function() {　　

　　　　$(‘img.lazy‘).lazyload();

　　})

</script>

註意：對於需要懶加載的圖片需要提前設置好大小，否則懶加載功能無效

懶加載還可以設置一些參數來達到炫酷的效果：

• $("img.lazy").lazyload({ placeholder : ‘"./img/placeholder_img.jpg" });

默認時未加載的圖片是一塊灰色背景板，通過該placeholder可以設置默認圖片占位，可對比類似input的placeholder

• $("img.lazy").lazyload({ threshold : 200 });

在默認情況下，視圖區到達圖片位置時，圖片才開始加載，而如上例threshold: 200的設置會讓視圖區距離圖片位置還有200px的時候圖片開始加載

• $("img.lazy").lazyload({ event : "click" });

默認情況下，圖片出現在視圖區的時候就直接加載，而我們可以通過設置事件觸發來讓圖片在某種特定事件中加載，如上例event: "click"的設置會當我們點擊圖片時圖片才加載

• $("img.lazy").lazyload({ effect : "fadeIn" });

默認情況下，圖片會以show()的動畫效果加載出來，我們可以通過設置effect參數讓圖片以我們想要的效果出現，如上例effect: "fadeIn"的設置會使圖片漸進加載出來

• #container { height: 600px; overflow: scroll; } $("img.lazy").lazyload({ container: $("#container") });

以上的例子中我們默認圖片文檔流在整個瀏覽器窗口下，視圖的延伸改變是通過瀏覽器滾動條來拖動，而通過container參數我們可以設置固定容器，讓圖片在設置的容器中懶加載，如上例，此時我們需要設置容器的大小，並允許容器溢出滾動

• $("img.lazy").lazyload({ failure_limit : 10 });

默認情況，插件循環搜索所有未加載的圖片，直到找到第一個未加載的，就停止繼續搜索，插件默認是按照文檔流來搜索圖片，而有些布局會導致圖片的實際位置與文檔流中的先後順序不一樣，這時可能會出現在視圖上排在前面的圖片為加載，而排在後面的開始加載了，該參數屬性的設置，會讓插件循環到第10個未加載的圖片才停止

• $("img.lazy").lazyload({ skip_invisible : true });

文檔流中的圖片並不是所有都是visible的，對於invisible的圖片，壓根不需要加載，更不需要懶加載，通過設置skip_invisible: true可以跳過invisible的圖片不加載

圖片懶加載lazyload