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;