懶加載之jQuery圖片延遲加載插件jQuery.lazyload

今天給大家介紹一個懶加載插件lazyload.js

使用方法

1.引用jquery和jquery.lazyload.js到你的頁面

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.lazyload.js"></script>

2.html圖片調用方法

爲圖片加入樣式lazy  圖片路徑引用方法用data-original

<img class="lazy" data-original="images/list1.jpg">
<img class="lazy" data-original="images/list2.jpg">
...

3.js

<script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({       
        placeholder : "img/grey.gif",
        effect: "fadeIn"
      });
  });
</script>

效果預覽

番外：

1、

$(“img”).lazyload({ threshold : 200 });   

把閥值設置成200 意思就是當圖片沒有看到之前先load 200像素。當然了你也可以通過設置佔位符圖片和自定事件來觸發加載圖片事件
比如：

$("img").lazyload({    
placeholder : "img/grey.gif",    
event : "click"   
});   

2、延遲加載圖片，Lazy Load 插件的一個不完整的功能, 但是這也能用來實現圖片的延遲加載. 下面的代碼實現了頁面加載完成後再加載. 頁面加載完成 5 秒後, 指定區域內的圖片會自動進行加載.

$(function() {    
$("img:below-the-fold").lazyload({    
placeholder : "img/grey.gif",    
event : "sporty"   
});    
});    
$(window).bind("load", function() {    
var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);    
});   

3、圖片在容器裏面你可以將插件用在可滾動容器的圖片上, 例如帶滾動條的 DIV 元素. 你要做的只是將容器定義爲 jQuery 對象並作爲參數傳到初始化方法裏面.
CSS：

#container {    
height: 600px;    
overflow: scroll;    
}   

JavaScript 代碼:

$("img").lazyload({    
placeholder : "img/grey.gif",    
container: $("#container")    
});   

此方法可以解決在scroll.js裏懶加載無效，主要還是因爲懶加載裝置裏沒有設置sroll的容器

參數設置：

$("img.lazy").lazyload({
  placeholder : "img/grey.gif", //用圖片提前佔位
    // placeholder,值爲某一圖片路徑.此圖片用來佔據將要加載的圖片的位置,待圖片加載時,佔位圖則會隱藏
  effect: "fadeIn", // 載入使用何種效果
    // effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  threshold: 200, // 提前開始加載
    // threshold,值爲數字,代表頁面高度.如設置爲200,表示滾動條在離目標位置還有200的高度時就開始加載圖片,可以做到不讓用戶察覺
  event: 'click',  // 事件觸發時才加載
    // event,值有click(點擊),mouseover(鼠標劃過),sporty(運動的),foobar(…).可以實現鼠標莫過或點擊圖片纔開始加載,後兩個值未測試…
  container: $("#container"),  // 對某容器中的圖片實現效果
    // container,值爲某容器.lazyload默認在拉動瀏覽器滾動條時生效,這個參數可以讓你在拉動某DIV的滾動條時依次加載其中的圖片
  failurelimit : 10 // 圖片排序混亂時
     // failurelimit,值爲數字.lazyload默認在找到第一張不在可見區域裏的圖片時則不再繼續加載,但當HTML容器混亂的時候可能出現可見區域內圖片並沒加載出來的情況,failurelimit意在加載N張可見區域外的圖片,以避免出現這個問題.
});