实现思路：首先加载部分数据，当下滑到某个元素可见的时候，如果还有数据，则新发送请求，然后追加在当前页面。
//判断元素是否进入可视区域 function see(objLiLast) { //浏览器可视区域的高度 var see=document.documentElement.clientHeight; //滚动条滑动的距离 var winScroll=$(this).scrollTop(); //距离浏览器顶部的 var lastLisee=$(objLiLast).offset().top; return lastLisee < (see + winScroll) ? true : false; } //预设页码为当前第一页 var page=1; //获得总页码 var pageTotal=parseInt($('#allpage').val()); //是否请求出AJAX的“开关”； var onOff=true; $(window).scroll(function () { //拖动滚条时，是否发送AJAX的一个“开关” $('.topicBox').each(function () { //引用最后一个div var lastLi=$('.topicBox:last'); //调用是否进入可视区域函数 var isSee=see(lastLi); if (isSee && onOff && page < pageTotal) {//最底部元素可见，开关开启而且还有下拉 //$('#loadNext').show(); //显示正在加载图标 onOff=false; $.ajax({ url: '/GetPageData', type: 'GET', dataType: 'json', data: { page: page+1 }, asyc: false, success: function (result) { if (result.status=='success') { var data=result.result; for (var i=0; i < data.length; i++) { //to do coding ... }; } //$('#loadNext').hide(); //隐藏正在加载 onOff=true; page ++; } }); } }); });
