码迷,mamicode.com
首页 > Web开发 > 详细

jquery列表自动加载更多

时间:2015-04-22 00:26:38      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:

<div id="list_box"></div>

<div id="getMore" style="position:fixed; bottom:0; opacity:0.7; height:24px; line-height:24px; background:#fff; color:#000;">更多内容正在加载...</div>

<script>
var cur_page = 0;
var max_page = 100;
var page_size = 15;
	
function get_content(){
	cur_page++;
	
	var str = ‘‘;
	$.post("http://www.frontopen.com/xxx.php", {‘type‘:t, ‘size‘:page_size, ‘page‘:cur_page}, function(s){
		$(‘#getMore‘).hide();
		
		s = $.parseJSON(s);
		for(i in s){
			str += ‘‘;
		}
		$("#list_box").append(str);	
	});
}

$(document).ready(function() {
	
	//页面回退时优先加载缓存,并自动滚动到原阅读位置
	var con = localStorage.getItem("active_list_con");
	if(con){
		cur_page = localStorage.getItem("active_list_page");
		$("#list_box").append(con);	
		$("html,body").css(‘scrollTop‘, localStorage.getItem("active_list_scroll"));	
	}

    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() == $(document).height() && cur_page != max_page) {
			$(‘#getMore‘).show();
			get_content();
			
			//加入缓存
			localStorage.setItem("active_list_con", $("#list_box").html());
			localStorage.setItem("active_list_page", cur_page);
			localStorage.setItem("active_list_scroll", $(window).scrollTop());
		}
    });
	
	//页面进入时自动第一次加载内容
	get_content();

});
</script>

 

jquery列表自动加载更多

标签:

原文地址:http://www.cnblogs.com/doseoer/p/4445994.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!