lazyload.js詳解

簡介

lazyload.js用於長頁面圖片的延遲加載，視口外的圖片會在窗口滾動到它的位置時再進行加載，這是與預加載相反的。

優勢：

• 它能夠提升頁面加載速度；
• 在某些狀況清晰它也能夠幫助減小服務器負載。
  

安裝

bower安裝：

[Shell]

純文本查看

複製代碼

?

1	$ bower install jquery.lazyload

npm安裝:

[Shell]

純文本查看

複製代碼

?

1	$ npm install jquery-lazyload

使用

lazyload依賴與jquery。因此先引入jquery和lazyload

[JavaScript]

純文本查看

複製代碼

?

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

1.將圖片路徑寫入data-original屬性
2.給lazyload的圖片增長一個名爲lazy的class
3.選擇全部要lazyload的圖片（img.lazy），執行lazyload();

[HTML]

純文本查看

複製代碼

?

1 2 3 4 5 6

< img class = "lazy" data-original = "img/example.jpg" style = "margin-top:1000px" height = "200" > < script > $(function(){ $("img.lazy").lazyload(); }) </ script >

注意：必須設置圖片的高度或者寬度，不然插件可能沒法正常工做

提早加載——Threshold

lazyload默認是當滾動到該圖片位置時，加載該圖片。可是能夠經過設置Threshold參數來實現滾到距離其xx px時就加載。

[JavaScript]

純文本查看

複製代碼

?

1 2 3 4 5

$( function (){ $( "img.lazy" ).lazyload({ event : "click" }); [align=left][color=rgb(0, 0, 0)][font="]})

上面的例子設置了滾動到距離圖片20px時，圖片就開始再開始加載 事件觸發(能夠是jquery事件，也能夠是自定義事件)——Event

當觸發定義的事件時，圖片纔開始加載

[JavaScript]

純文本查看

複製代碼

?

1 2 3 4

$( function (){[/size][/font][/backcolor] $( "img.lazy" ).lazyload({ event : "click" }); })

上面的例子使圖片點擊後，纔開始加載

Tip:你可使用這個來實現圖片的延遲加載

[JavaScript]

純文本查看

複製代碼

?

01 02 03 04 05 06 07 08 09 10 11

$( function () { $( "img.lazy" ).lazyload({ event : "sporty" }); }); $(window).bind( "load" , function () { var timeout = setTimeout( function () { $( "img.lazy" ).trigger( "sporty" ) }, 5000); });

上面的代碼在頁面加載完畢後五秒纔開始加載圖片

設定效果——Effects

插件默認的加載效果是 show() ,你可使用任何你想要的效果。下面的代碼使用了 fadeIn()

[JavaScript]

純文本查看

複製代碼

?

1 2 3

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

滾動容器內的圖片——container

插件也可使用在滾動容器內的圖片上。下面的div擁有scrollerbar，內容的內容進行滾動，滾到圖片位置時，圖片開始加載

[HTML]

純文本查看

複製代碼

?

01 02 03 04 05 06 07 08 09 10

< div style = "height:600px;overflow:scroll" id = "container" > < img class = "lazy" data-original = "img/example.jpg" alt = "" style = "margin-top:1000px" height = "200" > </ div > < script > $(function(){ $("img.lazy").lazyload({ container: $("#container") }); }) </ script >

不順序排列的圖片

• 插件會執行一個尋找未加載圖片的循壞，該循環會檢查圖片是否可見，默認狀況下，當第一個視圖外的圖片被找到，循環就會中止 。
• 可是存在一種狀況：頁面佈局圖片的順序和html圖片代碼的順序不一致;它會致使本該加載的沒有加載。這種狀況下就能夠將 failurelimit 設爲 10 ，它令插件找到 10 個不在可見區域的圖片是才中止搜索. 若是你有一個噁心的佈局, 請把這個參數設高一點。
  

代碼：

[JavaScript]

純文本查看

複製代碼

?

1 2 3

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

處理隱藏圖片——skip_invisible

爲了提高性能，插件默認忽略隱藏的圖片；若是想要加載隱藏圖片.設置skip_invisible爲false;

注意：Webkit瀏覽器將自動把沒有寬度和高度的圖像視爲不可見

[JavaScript]

純文本查看

複製代碼

?

1 2 3

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

文章轉載至：

https://www.cnblogs.com/yzg1/p/5051554.html