Ajax无限滚动加载数据

很流行的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:'http://caibaojian.com',title:'这个一个标题',desc:'这个一个描述'},{url:'http://caibaojian.com',title:'这个第二个标题',desc:'这个第二个描述'}],"pageNo":2,"pageCount":10})

JS代码

var intf_url="http://caibaojian.com/intf";var pathUrl = "http://caibaojian.com/";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(); }

以上就是比较简单的随着下拉内容不断加载的思路代码。

原文链接：Ajax无限滚动加载数据 版权所有，转载时请注明出处，违者必究。
注明出处格式：前端开发博客 (http://caibaojian.com/loading-ajax.html)