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;
                    });
                };
                       
            });

jQuery实现新浪微博自动底部加载的方法的更多相关文章

  1. Jquery实现滚动到底部加载更多(最原始)

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  2. jquery页面滑到底部加载更多

    $(window).scroll(function(){ var _scrolltop = $('body').scrollTop();if(_scrolltop+_winHeight>_doc ...

  3. jquery的ajax提交时加载处理方法

    1.定义全局的,就是所有的ajax的请求的加载都会出现相同的提示 $(function(){ //加载成功显示的状态 $("#showLoading").ajaxSuccess(f ...

  4. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  5. yii2 如何在页面底部加载css和js

    作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...

  6. 滚动到底部加载更多及下拉刷新listview的使用

    最新内容建议直接访问原文:滚动到底部加载更多及下拉刷新listview的使用 本文主要介绍可同时实现下拉刷新及滑动到底部加载更多的ListView的使用. 该ListView优点包括:a. 可自定义下 ...

  7. Android中GridView滚动到底部加载数据终极版

    之前在项目中有一个需求是需要GridView控件,滚动到底部自动加载.但是呢GridView控件并不提供诸如ListView监听滚动到底部的onScrollListener方法,为了实现这样一个效果, ...

  8. 使用jquery.more.js上滑加载更多

    html: <div id="more"> <div class="single_item"> <div class=" ...

  9. ExtJs基础知识总结:自定义弹窗和ComboBox自动联想加载(四)

    概述 Extjs弹窗可以分为消息弹窗.对话框,这些弹窗的方式ExtJs自带的Ext.Msg.alert就已经可以满足简单消息提示,但是相对复杂的提示,比如如何将Ext.grid.Panel的控件显示嵌 ...

随机推荐

  1. [ 转载 ] Java基础10--关于Object类下所有方法的简单解析

    关于Object类下所有方法的简单解析 类Object是类层次结构的根类,是每一个类的父类,所有的对象包括数组,String,Integer等包装类,所以了解Object是很有必要的,话不多说,我们直 ...

  2. C# String.Format 格式化字符串 数字/时间

    首先献给只想知道结果的人 格式化 DateTime 对象 标准 数字 格式化 Int Decimal Float Double 关于这一块一直不是很清楚,MSDN 上也不够清晰. 就花了点时间敲了一下 ...

  3. JSOI2018R2题解

    D1T1:潜入行动 裸的树上DP.f[i][j][0/1][0/1]表示以i为根的子树放j个设备,根有没有放,根有没有被子树监听,的方案数.转移显然. #include<cstdio> # ...

  4. [POI2017]Sabotaż

    [POI2017]Sabotaż 题目大意: 一棵\(n(n\le5\times10^5)\)个结点的树,初始时有一个未知的黑点,其余全为白点.对于一个点,如果其子树中黑点所占比例超过\(x\),则这 ...

  5. CodeIgniter框架中关于URL重写(index.php)的二三事

    最近,在做自己的个人网站时,采用了轻量级的php框架CodeIgniter.乍一看上去,代码清晰简洁,MVC模型非常容易维护.开发时我采用的工具是Netbeans IDE 8.0,当然,本文的内容和开 ...

  6. PHP self与static区别

    this,static和self. self和this还是很好区分的,可是self和static就很糊涂了,两者都能调用静态的方法和属性,看似使用上没有什么太大的分别,但是实际上分别很大,先来看下面这 ...

  7. JDK居然还有Server和Client模式

    JDK这货居然还分Server和Client版本,但经过观察,据说从1.7+版本开始这两者运行的区别已经逐步减少了.所以接下来的分析没啥意义. 参考: http://www.oracle.com/te ...

  8. Linux命令service - 系统服务管理(转)

    用途说明 service命令用于对系统服务进行管理,比如启动(start).停止(stop).重启(restart).查看状态(status)等.相关的命令还包括chkconfig.ntsysv等,c ...

  9. HDU 4730 We Love MOE Girls (2013成都网络赛,签到水题)

    We Love MOE Girls Time Limit: 1000/500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  10. Using PWM Output as a Digital-to-Analog Converter

    http://www.ti.com/lit/an/spraa88a/spraa88a.pdf http://www.ti.com/litv/zip/spraa88a The high-resoluti ...