jQuery图片延迟加载 jquery.lazyload.js 插件

1、jquery.lazyload.js简介：

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

2、jquery.lazyload.js优点：

它可以提高页面加载速度，在某些情况清晰它也可以帮助减少服务器负载。

3、安装lazyload.js：

 （1）、bower安装：

$ bower install jquery.lazyload

 （2）、npm安装:    

$ npm install jquery-lazyload

4、lazyload.js站点中如何使用：

lazyload依赖与jquery，所以先引入jquery和lazyload。

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

（1）、将图片路径写入data-original属性

（2）、给lazyload的图片增加一个名为lazy的class

（3）、选择所有要lazyload的图片（img.lazy），执行lazyload();

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

注意：必须设置图片的高度或者宽度，否则插件可能无法正常工作

5、提前加载-Threshold

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

下面的例子设置了滚动到距离图片20px时，图片就开始再开始加载事件触发(可以是jquery事件，也可以是自定义事件)-Event当触发定义的事件时，图片才开始加载。

$(function(){ 
$("img.lazy").lazyload({ threshold :20 }); 
})

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

$(function(){
$("img.lazy").lazyload({ event : "click" });
})

然而我们可以使用这个来实现图片的延迟加载。

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

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

6、设定效果-Effects 插件默认的加载效果是 show() ,你可以使用任何你想要的效果。

下面的代码使用了 fadeIn()

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

滚动容器内的图片-container。

插件也可以使用在滚动容器内的图片上。

下面的div拥有scrollerbar，内容的内容进行滚动，滚到图片位置时，图片开始加载。

<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>

7、不顺序排列的图片。

插件会执行一个寻找未加载图片的循坏，该循环会检查图片是否可见，默认情况下，当第一个视图外的图片被找到，循环就会停止 。

但是存在一种情况：页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载。这种情况下就可以将 failurelimit 设为 10 ，它令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个恶心的布局, 请把这个参数设高一点。

如下代码：

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

处理隐藏图片-skip_invisible为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片.设置skip_invisible为false。

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

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

8、最后附上插件官网地址：

（1.9.3版本）https://www.npmjs.com/package/jquery-lazyload

（2.x version）https://appelsiini.net/projects/lazyload/

9、最后附上插件源码，直接复制使用。

http://www.appelsiini.net/projects/lazyload

原版的：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

缩减的：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

好文章收藏，方便日后使用，本文来自 cnblogs作者：Brand。