jquery.lazyload（懶加載）的使用與配置

時間 2019-11-12

標籤 jquery.lazyload jquery lazyload 加載使用配置欄目 JQuery 简体版

原文原文鏈接

jquery lazyload是一款基於jquery框架的圖片延遲加載應用，它能夠讓用戶訪問頁面的時候只顯示當前屏幕所示的圖片。原理爲利用JS替換圖片src爲loading圖片，新data-original屬性放置圖片地址，scroll事件觸發JS把src從新換成圖片的真實地址。html

一. 如何使用jquery

// 最簡單的使用，不帶參數

$('img').lazyload();

// 帶參數(配置對象)，下面配置對象中的各個屬性值都是默認的

$('img').lazyload({

threshold : 0,瀏覽器

failure_limit : 0,app

event : 「scroll」, //觸發事件框架

effect : 「show」, //顯示方式ide

container : window, //容器佈局

data_attribute : 「original」, //屬性動畫

skip_invisible : true,this

appear : null,spa

load : null, placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"

});

二. 參數配置

1. threshold：

臨界值，這個值是針對container容器的，即距離container容器視口的臨界值，就是用來提早加載的。

如： $(「img」).lazyload({ threshold : 200 });當距離圖片還有200像素的時候，就開始加載圖片。

2. event：

事件，container容器默認綁定scroll這個事件，在這個事件被觸發時，會不斷的判斷img元素是否知足觸發appear的條件，所以當瀏覽器不停的滾動下來時，若是知足條件，則顯示圖片；

另外還有一點，若是這個事件不是scroll事件，則選中的img元素都會綁定這個事件，綁定的這個事件中一樣會觸發內部appear事件；

3. effect：

顯示方法，默認爲show，也能夠設置爲fadeIn，API中隱藏了一個配置屬性effectspeed，動畫運行的時間

4. data_attribute: "original「

img元素的一個data屬性，用於存放圖片的真實地址

5. skip_invisible: true

true:不加載隱藏的不可見圖像，false:爲加載，如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery.lazyload</title>
    <style>
      .cont{ width:640px; height:300px; overflow: scroll; position:relative; }
      .cont img{ width:640px; }
    </style>
</head>
<body>

<div class="cont">
    <img data-original="img/1.jpg" style="display:none" />
    <img data-original="img/2.jpg" />
    <img data-original="img/3.jpg"  />
    <img data-original="img/4.jpg" />
    <img data-original="img/5.jpg" />
    <img data-original="img/6.jpg" />
</div>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script>
    $(function(){
        $("img").lazyload({"container":".cont","skip_invisible":false});
    });
</script>
</body>
</html>

6. placeholder

圖片佔位符，img元素默認src屬性爲1*1像素的透明圖片

7. appear: null

在img觸發appear事件時執行的回調

8. load: null

在img觸發load事件時執行的回調

9. failure_limit: 0

循環查找 img，根據 HTML 文檔的佈局從上往下查找,0表示當找到第一個並未顯示/加載的 img 時,就會中止往下查找.

若是找到的是第 failure_limit 個img元素，且不在container視口上方，左方及視口內（能夠容許在視口下方，右方），則中斷循環。如：

$(「img」).lazyload({ failure_limit : 10 }); 表示插件找到 10 個不在可見區域的圖片是才中止搜索。

注： float 和 position 形成圖片排序換亂時，纔會有做用

三.其餘

1.jquery lazyload能夠作延時，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延時加載-jquery.lazyload</title>
    <style>
      .cont{ width:640px; height:300px; overflow: scroll; position:relative; }
      .cont img{ width:640px; }
    </style>
</head>
<body>

<div class="cont">
    <img data-original="img/1.jpg" />
    <img data-original="img/2.jpg" />
    <img data-original="img/3.jpg" />
    <img data-original="img/4.jpg" />
    <img data-original="img/5.jpg" />
    <img data-original="img/6.jpg" />
</div>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script>
$(function() {   
  $("img").lazyload({  
    event : "sporty"  
  });   
});   
$(window).bind("load", function() {   
  var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);   
});  
</script>
</body>
</html>

2.tab加載

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab-jquery.lazyload</title>
    <style>
      .nav span{ background:#ccc; display:inline-block; width:80px; height:40px; line-height:40px; text-align:center; cursor:pointer; }
      .nav span.on{ background:#eee; }
      .cont{ width:640px; height:300px; }
      .cont-item{ width:640px; height:300px; overflow: scroll; }
      .cont img{ width:640px; }
      .cont .cont-item:nth-child(2){ display:none; }
    </style>
</head>
<body>
<div class="nav">
    <span class="on">1</span>
    <span>2</span>
</div>
<div class="cont">
  <div class="cont-item">
    <img data-original="img/1.jpg" height="574" width="765" />
    <img data-original="img/2.jpg" height="574" width="765" />
    <img data-original="img/3.jpg" height="574" width="765" />
  </div>
  <div class="cont-item">
    <img data-original="img/4.jpg" height="574" width="765" />
    <img data-original="img/5.jpg" height="574" width="765" />
    <img data-original="img/6.jpg" height="574" width="765" />
  </div>
</div>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script>
    $(function(){
        $(".cont-item").eq(0).find("img").lazyload({"container":".cont-item"});
        $(".nav span").click(function(){
            var t = $(this);
            var inx = t.index();
            if(t.hasClass("on")){
                return;
            }else{
                t.addClass("on").siblings("span").removeClass("on");
                $(".cont-item").eq(inx).show().siblings(".cont-item").hide();
                $(".cont-item").eq(inx).find("img").lazyload({"container":".cont-item"});
            }
        });
    });
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。