圖片懶加載使用方法

對前端而言，提高網頁的加載速度非常重要。眾所周知，圖片是最吃流量的。我們都知道的優化技巧是頁面加載時只加載首屏頁面用到的圖片即可，其他的圖片資源可以稍后再加載。有一款jquery的lazyload插件便是一個可以實現圖片延遲加載的插件，在用戶觸發某個條件之后再加載對應的圖片資源，這對網站的打開速度有很大提升。

1、插件的使用方法很簡單（依賴jquery）：引入lazyload.js（壓縮版才4KB）
2、對我們想要延遲加載的圖片添加lazy樣式，用”data-original” 替換圖片的引用路徑

3、將頁面里所有img屬性src屬性用data-xx代替，當頁面滾動直至此圖片出現在可視區域時，用js取到該圖片的data-xx的值賦給src。

<!--對img標簽使用--><imgclass="lazy"data-original="img/example.jpg"><!--延遲加載元素的背景圖--><pclass="lazy"data-original="img/bg.jpg">

4、在JS文件中調用lazyload()方法，具體例子如下。

$(function(){//可任意選擇你想延遲加載的目標元素，例如直接使用樣式名lazy作為選擇條件$("img.lazy").lazyload({placeholder:"img/grey.gif",//占位圖effect:"fadeIn",//加載效果threshold:200,//提前加載event:'click',//triggercontainer:$("#container"),//指定容器failurelimit:5//發生混亂時的hack手段});});

參數的具體說明如下：