使用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<result.list.length;i++){         list +='';     }     $('#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('<a id="downloadMoreData" class="appui_loadmore fs32 fc-greyabc">拼命加载中<i class="loadmore"></i></a>');    }else if (result.page.pages == result.page.currentPage && result.page.pages >= 1) {        $('#downloadMoreData').remove();        $('#professList').append('<a class="appui_loadmore fs32 fc-greyabc">已经没有了</a>');    }else if(result.list.length == 0){        $('#professList').html(commonNoMoreContent("暂无问答"));    }}
到此结束。
指的注意的是要在初始状态加上正在加载的标签，这样才能从第一步开始执行。
<a id="downloadMoreData" class="appui_loadmore fs32 fc-greyabc">拼命加载中<i class="loadmore"></i></a>