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>