圖片懶加載lazyload

圖片懶加載：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的圖片不加載