jquery.lazyload（懒加载）的使用与配置

jquery lazyload是一款基于jquery框架的图片延迟加载应用，它可以让用户访问页面的时候只显示当前屏幕所示的图片。原理为利用JS替换图片src为loading图片，新data-original属性放置图片地址，scroll事件触发JS把src重新换成图片的真实地址。

一. 如何使用

// 最简单的使用，不带参数

$('img').lazyload();

// 带参数(配置对象)，下面配置对象中的各个属性值都是默认的

$('img').lazyload({

threshold : 0,

failure_limit : 0,

event : “scroll”, //触发事件

effect : “show”, //显示方式

container : window, //容器

data_attribute : “original”, //属性

skip_invisible : true,

appear : null,

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>

jquery.lazyload（懒加载）的使用与配置的更多相关文章

jQuery lazyload 懒加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
jquery 图片懒加载
jquery 图片懒加载 CreationTime--2018年7月1日14点45分 Author:Marydon 1.源码展示 (function(a){a.fn.lazyload=functi ...
在ThinkPHP框架（5.0.24）下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库，同时实现lazyload懒加载
这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...
jquery图片懒加载效果
1.要引入jquery 2.要引入underscore.js <!DOCTYPE html> <html lang="en"> <head> & ...
lazyload懒加载的使用
1.引用<script src="http://a.tbcdn.cn/apps/baron/js/??lib/tmm/tmm.js,lib/lazyload/lazyload.js?2 ...
react 使用 lazyload 懒加载图片
文档地址 index.html <script> (function(w, d) { var b = d.getElementsByTagName("body")[0] ...
如何在小程序实现图片lazy-load懒加载效果
自从跳一跳出现之后小程序又开始频繁出现了,在学习过程中发现小程序虽然好但是由于api不完善导致开发过程中有很多的坑,重点是网上相对小程序出现坑时解决方案显然比较少,小程序最让人觉得痛心疾首之一就是无法 ...
jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...

随机推荐

Linux基础-07-系统的初始化和服务
1. Linux系统引导的顺序 1) Linux系统引导的顺序: 其中,BIOS的工作是检查计算机的硬件设备,如CPU.内存和风扇速度等: MB ...
Python3 - 随便说一下
Ⅰ编程语言基础知识 ⅡPython 语言概述 Ⅰ编程语言基础知识编程语言总体分以为机器语言.汇编语言.高级语言: 机器语言:计算机硬件能够直接使用的编程语言,二进制的集合,属于低级语言. 汇编语言: ...
机器学习之逻辑回归(Logistic)笔记
在说逻辑回归之前,可以先说一说逻辑回归与线性回归的区别: 逻辑回归与线性回归在学习规则形式上是完全一致的,它们的区别在于hθ(x(i))为什么样的函数当hθ(x(i))=θTx(i)时,表示的是线性 ...
Vue.js源码全方位深入解析--学习笔记
模板中的插入变量是如何渲染到DOM上的? initMixin(Vue)->_init->$options-> $mount()当执行该挂载方法时DOM变化为什么可以通过this访问 ...
Mybatis整合（Redis、Ehcache）实现二级缓存
目的: Mybatis整合Ehcache实现二级缓存 Mybatis整合Redis实现二级缓存 Mybatis整合ehcache实现二级缓存 ssm中整合ehcache 在POM中导入相关依赖 < ...
linux根文件系统的挂载过程详解
一:前言前段时间在编译kernel的时候发现rootfs挂载不上.相同的root选项设置旧版的image却可以.为了彻底解决这个问题.研究了一下rootfs的挂载过程.特总结如下,希望能给这部份知识 ...
Authorization
授权,也叫访问控制,即在应用中控制谁访问哪些资源(如访问页面/编辑数据/页面操作等).在授权中需了解的几个关键对象:主体(Subject).资源(Resource).权限(Permission).角色 ...
通过 Kubeadm 安装 K8S 与高可用，版本1.13.4
环境介绍: CentOS: 7.6 Docker: 18.06.1-ce Kubernetes: 1.13.4 Kuberadm: 1.13.4 Kuberlet: 1.13.4 Kuberctl: ...
在论坛中出现的比较难的sql问题：15(生成动态删除列语句分组内多行转为多列)
原文:在论坛中出现的比较难的sql问题:15(生成动态删除列语句分组内多行转为多列) 所以,觉得有必要记录下来,这样以后再次碰到这类问题,也能从中获取解答的思路. 1.如果去掉这个临时表中合计为0 ...
windows + Eclipse 汉化
https://www.eclipse.org/babel/downloads.php 下载Eclipse 对应版本汉化包解压复制文件夹里的内容到eclipse 文件夹下对应的文件里重启ecli ...

jquery.lazyload（懒加载）的使用与配置

jquery.lazyload（懒加载）的使用与配置的更多相关文章

随机推荐

热门专题