大概是懒加载的简单实现

这个是以前学习写的，最近正好要用到懒加载，现在简单的复习复习。

记得没错的话是学习了这篇文章后

https://www.jianshu.com/p/cea62b6868ce

来看看这个demo长什么样

先来分析一波，看图片

HTML代码就不贴出来了，直接看js代码，后面有地址可以下载。

1.监听滑动事件

　　 var lazyLoad={};
    var isblock = true;//初始可见块为可见
    var timer=1;//加载计数
    var $block;//可见块

    window.lazyLoad=lazyLoad;//暴露对象
    //监听滑动
    $("body").on('scroll',function(){
        //如果不可见
        if(!isblock){
            return
        }
        //判断可见块是否可见
        if(lazyLoad.isVisible($block)){  
            lazyLoad.init($block)//开始加载
        }
    });

2.判断目标块是否进入人们视野

　　//是否可见
    lazyLoad.isVisible=function($element){
        var winHight = $(window).height(),//屏幕高度
            distanceTop = $element.offset().top;//可见块与距离顶部
        //判断元素是否进入视野
        if(distanceTop <= winHight){  
            console.log("开始加载");
            return true
        }else{
            return false
        }
    }

3.开始加载

    lazyLoad.init=function(input){
        $block=input;

        //获取数据
        lazyLoad.getdata(function(datalist){
            isblock=true;
            //遍历数据
            $.each(datalist,function(index,history){
                // 拿到的数据进行拼接
                var $node = lazyLoad.addNode(history)   
                $('.history-container').append($node)
            });
        });
        $block.css("visibility","visible");
        isblock=false;
    };

4.ajax请求

    lazyLoad.getdata=function(callback){
        $.ajax({
                url:"http://yyyxuan.cn/lay-eggs/js/test.php",
                type: "POST",
                data:"time="+timer
                }).done(function(ret){
                        //转化json
                        var json=$.parseJSON(ret);
                        if (json==null) {
                            $block.css("visibility","visible");
                            $block.text("到底了");
                            return;
                        }
                        else{$block.css("visibility","hidden");}
                        callback(json.data);
                        timer++;
                    });
    };

 5.元素拼接

lazyLoad.addNode=function(dataitems){
        var cardnode = '需要拼接的内容';
        return $(cardnode);
    };

6.在页面调用init()，并传入这个目标块

lazyLoad.init($('#visible-block'));

附GitHub地址

https://github.com/steffenx/H5Lazyload