jQuery插件实现网页底部自动加载-类似新浪微博

浏览数：64 / 时间：2015年06月09日

新浪微博网页自动底部加载的效果很酷吧？其实这种叫做“无限滚动的翻页技术”，当你页面滑到列表底部时候无需点击就自动加载更多的内容。

其实有很多jQuery的插件都已经实现了这个效果，我们来介绍几个吧！

1、jQuery ScrollPagination

jQuery ScrollPagination plugin 是一个jQuery 实现的支持无限滚动加载数据的插件。

地址：http://andersonferminiano.com/jqueryscrollpagination/

他的demo下载：http://andersonferminiano.com/jqueryscrollpagination/jqueryscrollpagination.zip

实例代码：

$(function(){
$(‘#content‘).scrollPagination({
‘contentPage‘: ‘democontent.html‘, // the url you are fetching the results
‘contentData‘: {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
‘scrollTarget‘: $(window), // who gonna scroll? in this example, the full window
‘heightOffset‘: 10, // it gonna request when scroll is 10 pixels before the page ends
‘beforeLoad‘: function(){ // before load function, you can display a preloader div
$(‘#loading‘).fadeIn();
},
‘afterLoad‘: function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
$(‘#loading‘).fadeOut();
var 
i = 0;
$(elementsLoaded).fadeInWithDelay();
if 
($(‘#content‘).children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
$(‘#nomoreresults‘).fadeIn();
$(‘#content‘).stopScrollPagination();
}
}
});
// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var 
delay = 0;
return 
this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});