lazyload.js详解

简介

lazyload.js用于长页面图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，这是与预加载相反的。

优势：

• 它能够提升页面加载速度；
• 在某些状况清晰它也能够帮助减小服务器负载。
  

安装

bower安装：

[Shell]

纯文本查看

复制代码

?

1	$ bower install jquery.lazyload

npm安装:

[Shell]

纯文本查看

复制代码

?

1	$ npm install jquery-lazyload

使用

lazyload依赖与jquery。因此先引入jquery和lazyload

[JavaScript]

纯文本查看

复制代码

?

1 2	<script src= "jquery.js" ></script> <script src= "jquery.lazyload.js" ></script>

1.将图片路径写入data-original属性
2.给lazyload的图片增长一个名为lazy的class
3.选择全部要lazyload的图片（img.lazy），执行lazyload();

[HTML]

纯文本查看

复制代码

?

1 2 3 4 5 6

< img class = "lazy" data-original = "img/example.jpg" style = "margin-top:1000px" height = "200" > < script > $(function(){ $("img.lazy").lazyload(); }) </ script >

注意：必须设置图片的高度或者宽度，不然插件可能没法正常工做

提早加载——Threshold

lazyload默认是当滚动到该图片位置时，加载该图片。可是能够经过设置Threshold参数来实现滚到距离其xx px时就加载。

[JavaScript]

纯文本查看

复制代码

?

1 2 3 4 5

$( function (){ $( "img.lazy" ).lazyload({ event : "click" }); [align=left][color=rgb(0, 0, 0)][font="]})

上面的例子设置了滚动到距离图片20px时，图片就开始再开始加载 事件触发(能够是jquery事件，也能够是自定义事件)——Event

当触发定义的事件时，图片才开始加载

[JavaScript]

纯文本查看

复制代码

?

1 2 3 4

$( function (){[/size][/font][/backcolor] $( "img.lazy" ).lazyload({ event : "click" }); })

上面的例子使图片点击后，才开始加载

Tip:你可使用这个来实现图片的延迟加载

[JavaScript]

纯文本查看

复制代码

?

01 02 03 04 05 06 07 08 09 10 11

$( function () { $( "img.lazy" ).lazyload({ event : "sporty" }); }); $(window).bind( "load" , function () { var timeout = setTimeout( function () { $( "img.lazy" ).trigger( "sporty" ) }, 5000); });

上面的代码在页面加载完毕后五秒才开始加载图片

设定效果——Effects

插件默认的加载效果是 show() ,你可使用任何你想要的效果。下面的代码使用了 fadeIn()

[JavaScript]

纯文本查看

复制代码

?

1 2 3

$( "img.lazy" ).lazyload({ effect : "fadeIn" });

滚动容器内的图片——container

插件也可使用在滚动容器内的图片上。下面的div拥有scrollerbar，内容的内容进行滚动，滚到图片位置时，图片开始加载

[HTML]

纯文本查看

复制代码

?

01 02 03 04 05 06 07 08 09 10

< div style = "height:600px;overflow:scroll" id = "container" > < img class = "lazy" data-original = "img/example.jpg" alt = "" style = "margin-top:1000px" height = "200" > </ div > < script > $(function(){ $("img.lazy").lazyload({ container: $("#container") }); }) </ script >

不顺序排列的图片

• 插件会执行一个寻找未加载图片的循坏，该循环会检查图片是否可见，默认状况下，当第一个视图外的图片被找到，循环就会中止 。
• 可是存在一种状况：页面布局图片的顺序和html图片代码的顺序不一致;它会致使本该加载的没有加载。这种状况下就能够将 failurelimit 设为 10 ，它令插件找到 10 个不在可见区域的图片是才中止搜索. 若是你有一个恶心的布局, 请把这个参数设高一点。
  

代码：

[JavaScript]

纯文本查看

复制代码

?

1 2 3

$( "img.lazy" ).lazyload({ failure_limit : 10 });

处理隐藏图片——skip_invisible

为了提高性能，插件默认忽略隐藏的图片；若是想要加载隐藏图片.设置skip_invisible为false;

注意：Webkit浏览器将自动把没有宽度和高度的图像视为不可见

[JavaScript]

纯文本查看

复制代码

?

1 2 3

$( "img.lazy" ).lazyload({ skip_invisible : true });

文章转载至：

https://www.cnblogs.com/yzg1/p/5051554.html