使用ajax实现移动端懒惰加载

这个懒惰加载的叫法是很久以前听说过的，当时感觉会，哈哈，就没细做过。这次正儿八经的改了很多个这种形式，就来记录一下。

至于它叫不叫这个名字就再说了。我还习惯叫他异步加载。正文如下：

1.首先要检测屏幕的滑动

var flag = 0;  用来标记每一次加载的状态

var currentPage = 1;

$('.page').scroll(function(){

    if (flag==0){
        var a = "";
        if ($('#downloadMoreData').length > 0){
            a = document.getElementById("downloadMoreData").offsetTop;
            if (a >= $(this).scrollTop() && a < ($(this).scrollTop()+$(window).height()-40)) {
                flag = -1;
                downloadMoreData();
            }
        }
    };
});

 2. 屏幕移动超过一定范围则改变 flag状态，然后执行 downloadMoreDate()方法

function downloadMoreData(index) {
    currentPage++;
    ajaxLabelCon(index);
}

这里主要是将当前页进行累加，那么这样的话就应该先将currentPage 初始化一个值。写到最开始的位置

它主要用来标记加载了多少页，然后根据总的页数和它比较，就能判断出各种状态。

3.向接口请求数据 ajaxLabelCon（）：

function ajaxLabelCon(index){
    var start = pernum * (currentPage -1);
    $.ajax({
        url: url,
        type: 'post',
        dataType: 'json',
        data:{
            "currentPage": currentPage,
            "typeid":categoryPreID,
            'start':start,
            "pernum":pernum,
            '_csrf':csrf},
        success: function(result){
            if (result.result == "success") {
                listExperters(result);
            }else{
                dataLoadedError(result.message);
            }
        }
    })
}

这个方法是没有经过加工，就为了简单显示其原理。

json数据返回的格式必须包括

'currentPage'=>1,
'start'=>0,
'pernum'=>3,
'total'=>6,
'pages'=>2,

这种形式，这里主要还是为了方便判断，是加载下一页还是加载已经完成。

4.循环出数据就行了

function listExperters(result){
     var list = '';
     for(var i=0;i'';
     }
     $('#professList').append(list);
     showMessage(result);
}

5.然后显示各种提示状态

function showMessage(result){
    if (result.page.pages > result.page.currentPage) {
        if (flag=-1) {
            flag = 0;
        };
        $('#downloadMoreData').remove();
        $('#professList').append('拼命加载中');
    }else if (result.page.pages == result.page.currentPage && result.page.pages >= 1) {
        $('#downloadMoreData').remove();
        $('#professList').append('已经没有了');
    }else if(result.list.length == 0){
        $('#professList').html(commonNoMoreContent("暂无问答"));
    }
}

到此结束。

指的注意的是要在初始状态加上正在加载的标签，这样才能从第一步开始执行。

<a id="downloadMoreData" class="appui_loadmore fs32 fc-greyabc">拼命加载中<i class="loadmore">i>a>