jQuery实现新浪微博自动底部加载的方法 - 起飞网
新浪微博网页自动底部加载的效果很酷吧？其实这种叫做&无限滚动的翻页技术&，当你页面滑到列表底部时候无需点击就自动加载更多的内容。
其实有很多jQuery的插件都已经实现了这个效果，我们来介绍几个吧！
1、jQuery ScrollPagination
jQuery ScrollPagination plugin 是一个jQuery 实现的支持无限滚动加载数据的插件。
地址：/jqueryscrollpagination/
他的demo下载：/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;
&&&&&&&&&&&&&&&&&&& });
&&&&&&&&&&&&&&& };
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&& });
2、 jQuery Screw
Screw (scroll + view) 是一个 jQuery 插件当用户滚动页面的时候加载内容，是一个无限滚动翻页的插件。
官方地址：/jasonlau/jQuery-Screw
3. AutoBrowse jQuery Plugin
Autobrowse jQuery Plugin 插件在用户滚动页面的时候自动通过 Ajax 加载更多内容，使用浏览器内置缓存。
官方地址：/msjolund/jquery-esn-autobrowsejavascript - Qn on jquery plugin (.scrollPagination) - Stack Overflow
to customize your list.
Announcing Stack Overflow Documentation
We started with Q&A. Technical documentation is next, and we need your help.
Whether you're a beginner or an experienced developer, you can contribute.
I've a piece of code here i got from GitHub. Its a Jquery scroll pagination plugin.
JAVASCRIPT
$(function(){
var count=$('#existing_campaign li').
$('#existing_campaign').scrollPagination({
'contentPage': '/cs_directory/helpers/campaigns_and_chats.php', // the url you are fetching the results
'contentData': {"count":count}, // 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();
alert($('#existing_campaign li').length);
'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
$('#loading').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
if ($('#existing_campaign li').length & 1000){ // if more than 100 results already loaded, then stop pagination (only for testing)
$('#nomoreresults').fadeIn();
$('#existing_campaign').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;
I'm not sure why but i keep getting the same values for my contentData after sending it over to contentPage for processing, regardless how many times i've activated the function and appended my list from contentPage.
I think its a caching problem but i'm not sure how i can clear the cache. Tried inserting as an option in .scrollPagination but doesn't work as well.
Wonder how i'm going to get through this. I know this can be done else how will i be able to group my &li&'s from my content page to display bit by bit?
The documentation is a little scarce on its options so i got to come here looking for answers. Hopefully, someone can provide some answers.
I had the same problem.
I fixed it this changing de content data in the BeforeLoad event and incrementing the page in the afterLoad event like this:
function initInfiniteScroll(data){
$('#my-div').scrollPagination({
'contentPage': url,
'scrollTarget': $(window),
'heightOffset': 1,
'AjaxAsync': true,
'beforeLoad': function () {
$(this).attr('contentData', data); // setting the contentData
'afterLoad': function (loadedData) {
data.currentPage++; //Incrementing the page
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled支持无限滚动加载数据 jQuery ScrollPagination-红联Linux系统门户
您的位置：
&& 查看内容 － － －
支持无限滚动加载数据 jQuery ScrollPagination
empast发布于
&&字号: &&&&(网友评论&0&条)&
jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件。
项目主页：
下载地址：
来自:开源中国社区
发表评论，与各位同人交流。回复请点击下方的我要评论按钮(游客可回复)，要发表贴子请点击
Linux教程下载？“”（请点击），Linux教程免费下载。
求助Linux问题？论坛有39版块，覆盖所有Linux技术层面。前往“”
　|　　|　　|　　|　　|　　|　　|　　|　　|　　|　　|　　|　
&2015 红联 Powered by SupSitejqueryscrollpagination JavaScript 238万源代码下载-
&文件名称: jqueryscrollpagination
& & & & &&]
&&所属分类:
&&开发工具: JavaScript
&&文件大小: 34 KB
&&上传时间:
&&下载次数: 6
&&提 供 者:
&详细说明：jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件。-jQuery ScrollPagination plugin is a jQuery implementation support unlimited rolling load data plug-ins.
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&jqueryscrollpagination&&......................\democontent.html&&......................\index.html&&......................\scripts&&......................\.......\jquery.js&&......................\.......\scrollpagination.js&&......................\scrollpagination_demo.css
&相关搜索:
&输入关键字，在本站238万海量源码库中尽情搜索：
&[] - 事项绚丽的微博 滚动消息jqueryscrollPagination
&[] - The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather inform
&[] - Client plugin for streaming webcam server&&&&jquery下拉加载（取代翻页功能）scroll pagination
jquery下拉加载（取代翻页功能）scroll pagination
jquery下拉加载（取代翻页功能）jqueryscrollpagination。完整的前台到后台的加载过程，一次只加载固定的部分内容。后台为servlet+java实现，工程为myeclipse创建，有疑问可以联系我。
若举报审核通过，可奖励20下载分
被举报人：
weijinzhang000
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
开发技术下载排行}