jquery.lazyload.js的几个参数

lazyload.js又称懒加载，它是jQuery的一个插件,可以用来实现图片异步加载，一般用于图片多的页面中延迟加载。

要使用lazyload你就得先引入jquery和lazyload：

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

1.将图片路径写入data-original属性，不仅是img，background也可以使用这个属性；
2.给lazyload的图片class名，可以随便取；
3.写入加载参数。

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

以上是必须的代码，值得注意的是图片最好设置高或宽度，否则可能出错。

lazyload中可以添加的参数，有好几个：

$(".lazy").lazyload({
//参数添加在这里面，建议一行一个,用英文逗号间隔
});

1.用图片提前占位: placeholder : "img/grey.gif",
参数:placeholder,占位图，正式加载图片前的小图片。

2.载入效果：effect : "fadeIn",
参数：effect(载入效果),有show(直接显示),fadeIn(淡入),slideDown(下拉)等,默认show

3.加载距离：threshold : 200,
参数:threshold，值为数字，代表页面高度，表示离看到图片还有多远距离就开始加载

4.事件触发时才加载：event : "click",
参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…)，根据事件来加载图片
比如：

$(function() {
    $(".lazy").lazyload({
        event : "sporty",
    });
});
//页面加载完毕后五秒才开始加载图片
$(window).bind("load", function() {
    var timeout = setTimeout(function() {
        $(".lazy").trigger("sporty")
    }, 5000);

5.对某容器中的图片实现懒加载：container: $("#id"),
参数:container,值为某容器.lazyload默认在浏览器滚动条时才生效,这个参数可以让你在某DIV的滚动条时依次加载其中的图片

6.不顺序排列的图片：failure_limit : 1,
参数:failurelimit,值为数字，lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载，但当页面布局图片的顺序和html图片代码的顺序不一致时，它会导致明明肉眼看得见的图片它却没有加载,failurelimit意在加载N张“不在可见区域”的图片。

7.处理隐藏图片：skip_invisible : true,
为了提升性能，插件默认忽略隐藏的图片，如果想要加载隐藏图片，请设置skip_invisible为false;

javascript, jquery