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. 用profile协助程序性能优化

     程序运行慢的原因有很多,比如存在太多的劣化代码(如在程序中存在大量的“.”操作符),但真正的原因往往是比较是一两段设计并不那么良好的不起眼的程序,比如对一序列元素进行自定义的类型转换等.因为程序性能 ...

  2. leetcode 奇偶链表 python

    要求空间复杂度O(1) 那就只能用指针不断改链表的指针, 不能建立新的内存 时间复杂度O(1) 一遍遍历 不能嵌套循环 我的思想是: 1 如果链表元素数量小于等于2个,那就无法操作 2 能操作的情况下 ...

  3. django 动态url 可变

    首先在urls里面改,name=让一个映射敷个名字. 然后到books——list页面让编辑按钮改成这种可变的映射模式.

  4. php <a href></a>链接地址中是php变量,链接文本也是php变量的代码处理方法

    1.所用php变量名为$recent_tests,是一个二维数组,示例如下: $recent_tests[0]["test_url"] = www.baidu.com $recen ...

  5. CodeForces 81D.Polycarp's Picture Gallery 乱搞

    D. Polycarp's Picture Gallery time limit per test 2 seconds memory limit per test 256 megabytes inpu ...

  6. ControllerEvent

    1.TouchDown  --->按下去 响应事件 2.TouchRepeat --->重复点击 ,从第二次点击开始响应事件 3.TouchDragInside  ---->在组建范 ...

  7. Python—对Excel进行读写操作

    学习Python的过程中,我们会遇到Excel的读写问题.通过搜索得知,我们可以使用xlwt module将数据写入Excel表格,使用xlrd module从Excel读取数据.下面介绍如何实现使用 ...

  8. 在WAMPSERVER下增加多版本的PHP(PHP5.3,PHP5.4,PHP5.5)完美支持。

    WAMPServer可以让开发者在Windows系统下快速搭建WAMP环境,它支持多版本的Apache.MySQL.PHP之间的相互切换,互不影响,对于PHPer开发者来讲极为方便快速. 以下是在WA ...

  9. Reverse Engineering the NC ECU (revisited) -- SH7508

    http://forum.miata.net/vb/showthread.php?t=536601 Hey all! About 5 years ago, there was a great thre ...

  10. HDU 2222 Keywords Search 【AC自动机模板】

    询问有多少个模式串出现在了文本串里面.将模式串插入Trie树中,然后跑一边AC自动机统计一下就哦了. 献上一份模板. #include <cstdio> #include <cstr ...