这个懒惰加载的叫法是很久以前听说过的,当时感觉会,哈哈,就没细做过。这次正儿八经的改了很多个这种形式,就来记录一下。
至于它叫不叫这个名字就再说了。我还习惯叫他异步加载。正文如下:
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>