浅谈lazyload

jq.lazyload.js用于长页面图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载。
jq.lazyload.js可在百度cdn中下载或引用。

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>
    $(function(){
        $("img.lazy").lazyload({
            //设置了滚动到距离图片20px时，图片就开始再开始加载
            threshold :20,
            //默认的加载效果是 show() ，下方自定义为fadeIn（）-淡入
            effect : "fadeIn"
        });
    })
</script>

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

如果图片在容器之中，那么请添加键值对

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