jquery.lazyload.js

如何使用

<img class="lazy" data-original="img/example.jpg" alt="">

<script>
    $(function(){
        $("img.lazy").lazyload();
    });
</script>

设置占位图片

$("img.lazy").lazyload({
    placeholder:"img/grey.gif"
});

设置临界点

$("img.lazy").lazyload({
    // 设置threshould为500令图片在距离屏幕500px时提前加载
    threshould:500
});

设置事件触发加载

$("img.lazy").lazyload({
    // 既可以使用jQuery事件，如：click和mouseover，也可以使用自定义事件
    event:"click"
});

使用特效

$("img.lazy").lazyload({
    // 默认调用show()
    effect:"fadeIn"
});

设置滚动容器内的图片

$("img.lazy").lazyload({
    // 对某容器中的图片实现效果
    container:$("#container")   
});

结束语

如果喜欢本文，记得点赞并加关注哟。