scrollpagination实现滚动页面加载数据

JQuery部分:   

(function($) {
	$.fn.scrollPagination = function(options) {
		var opts = $.extend($.fn.scrollPagination.defaults, options);
		var target = opts.scrollTarget;
		if (target == null) {
			target = obj
		}
		opts.scrollTarget = target;
		return this.each(function() {
			$.fn.scrollPagination.init($(this), opts)
		})
	};
	$.fn.stopScrollPagination = function() {
		return this.each(function() {
			$(this).attr('scrollPagination', 'disabled')
		})
	};
	$.fn.scrollPagination.loadContent = function(obj, opts) {
		var target = opts.scrollTarget;
		var mayLoadContent = $(target).scrollTop() + opts.heightOffset >= $(document).height() - $(target).height();
		if (mayLoadContent) {
			if (opts.beforeLoad != null) {
				opts.beforeLoad()
			}
			$(obj).children().attr('rel', 'loaded');
			curpage = curpage + 1;
			$.ajax({
				type: 'GET',
				url: opts.contentPage + curpage,
				data: opts.contentData,
				success: function(data) {
					$(obj).append(data);
					var objectsRendered = $(obj).children('[rel!=loaded]');
					if (opts.afterLoad != null) {
						opts.afterLoad(objectsRendered)
					}
				},
				dataType: 'html'
			})
		}
	};
	$.fn.scrollPagination.init = function(obj, opts) {
		var target = opts.scrollTarget;
		$(obj).attr('scrollPagination', 'enabled');
		$(target).scroll(function(event) {
			if ($(obj).attr('scrollPagination') == 'enabled') {
				$.fn.scrollPagination.loadContent(obj, opts)
			} else {
				event.stopPropagation()
			}
		});
		$.fn.scrollPagination.loadContent(obj, opts)
	};
	$.fn.scrollPagination.defaults = {
		'contentPage': null,
		'contentData': {},
		'beforeLoad': null,
		'afterLoad': null,
		'scrollTarget': null,
		'heightOffset': 0
	}
})(jQuery);
$(function() {
	$('#content_list').scrollPagination({
		'contentPage': geturl,
		'contentData': {},
		'scrollTarget': $(window),
		'heightOffset': 10,
		'beforeLoad': function() {
			$('#loading').fadeIn()
		},
		'afterLoad': function(elementsLoaded) {
			$('#loading').fadeOut();
			$(".timeago").timeago();
			$(elementsLoaded).fadeInWithDelay();
			if (curpage >= totalpage) {
				$('#nomoreresults').fadeIn();
				$('#content_list').stopScrollPagination()
			}
		}
	});
	
	$.fn.fadeInWithDelay = function() {
		var delay = 0;
		return this.each(function() {
			$(this).delay(delay).animate({
				opacity: 1
			}, 300);
			delay += 100
		})
	}
});


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值