很流行的ajax无限滚动加载，如何判断内容是否需要加载接口，什么时候开始加载合适，加载到什么地方停止？来看看这个简单的思路。
一般我们是这样子的。
1.当进入屏幕时，判断内容是否为空，如果不为空，开始初始化数据。
2.当往屏幕下拉时，判断数据的最底部与屏幕高度+滚动的高度的大小。如果最底部小于上面两者之和，重新请求接口，即加载数据。
3.当遇到数据超过某个页数时，停止加载或者用分页的形式显示，点击再显示内容。
HTML代码
<div class="list" id="list"> </div> <a href="javascript:void(0)" id="loading">正在加载</a>
json格式类似于（如果是动态接口，可以通过callback函数，则这里不用加fill()）：
fill({ "newsList":[{ url:'https://qdkfweb.cn', title:'这个一个标题', desc:'这个一个描述' },{ url:'https://qdkfweb.cn', title:'这个第二个标题', desc:'这个第二个描述' }], "pageNo":2, "pageCount":10 })
JS代码
var intf_url="https://qdkfweb.cn/intf"; var pathUrl = "https://qdkfweb.cn/"; var page=1; var isLoadRB=false; var list=$("#List"); var btn_more=$("#loading"); var is_more =true; //跨域请求接口 function loadJS(src,callback){ var js= document.createElement('script'); js.charset="utf-8"; js.src = src; js.onreadystatechange = js.onload =function(){ if(!js.readyState || js.readyState=='loaded' || js.readyState=='complete'){ if(callback){callback()||callback}; } }; document.getElementsByTagName('head')[0].appendChild(js); } //回调函数 function fill(data){ var html='',newsList = data.newsList, len=newsList.length,i=0; for(i<len; i++){ var news = newsList[i], title = news.title,url=news.url,desc = news.desc; html+='<a href="'+url+'">'+title+'</a>'; } list.append(html); if(data.pageCount==data.pageNo){ is_more=false;//如果数据全部加载完毕，取消加载 $("#loading").html("加载完毕"); } } //解析接口 function queryIntf(){ var url=page==1?intf_url+".json":intf_url+"_page"+page+".json"; loadJS(url,callback); } function callback(){ page++; isLoadRB = false; } /*判断是否要加载接口*/ function needtoloadRB(){ var btn_top=btn_more.offset().top; var window_height=$(window).height(); var scroll_Top=$(window).scrollTop(); return btn_top<scroll_Top+window_height?true:false; } $(window).scroll(function(){ var _needload=needtoloadRB(); if(_needload && isLoadRB==false &&is_more){isLoadRB=true;queryIntf();} }) window.onload = function(){ queryIntf(); }
以上就是比较简单的随着下拉内容不断加载的思路代码。
