lazyload.js实现懒加载

1：引入

<script type="text/javascript" src="assets/js/jquery.lazyload.min.js"></script>

2：html部分

<img class="lazy" data-original="assets/img/bmw_m1_hood.jpg" width="500px" height="500px">

备注：添加class是为了方便下面的js控制/   2.data-original=“”属性是真是图片地址  3.width和height两个属性必须设置不然图片会始终出现在显示区

3：js控制部分

$("img.lazy").lazyload({
        effect: "fadeIn",                                        //这个是显示效果 还有 show 和 sildeshow
        placeholder : 'assets/img/grey.gif',          //这个是加载前的显示图片

        threshold :20,                                          //滚动到距离图片20px时，图片就开始再开始加载
        event : "click",                                         //图片点击后，才开始加载
        container: $("#container"),                      //在滚动容器内的时候用这个，其中后面是选中的容器的id，前提是容器有scroll
        failure_limit : 10,                                     //页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载,用它，尽量设置的高些
        skip_invisible : true,                                //为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片.设置skip_invisible为false;

      });