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)

发表评论

请登录后发表评论: