zoukankan      html  css  js  c++  java
  • jQuery实现新浪微博自动底部加载的方法

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

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

    其实有很多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;
                        });
                    };
                           
                });

    2、 jQuery Screw

    Screw (scroll + view) 是一个 jQuery 插件当用户滚动页面的时候加载内容,是一个无限滚动翻页的插件。

    官方地址:https://github.com/jasonlau/jQuery-Screw

    3. AutoBrowse jQuery Plugin

    Autobrowse jQuery Plugin 插件在用户滚动页面的时候自动通过 Ajax 加载更多内容,使用浏览器内置缓存。

    官方地址:https://github.com/msjolund/jquery-esn-autobrowse

  • 相关阅读:
    jquery 中 $.map 的使用方法
    数据库 'MessageManage' 的事务日志已满。若要查明无法重用日志中的空间的原因,请参阅 sys.databases 中的 log_reuse_wait_desc 列。
    Post提交
    MD5加密、时间戳转换、base64算法加密、解密
    C#中timer类的用法
    软件项目版本号的命名规则及格式
    SQL Server数据库脚本备份与还原
    C# Out,Ref 学习总结
    在线工具
    构造和析构 的顺序
  • 原文地址:https://www.cnblogs.com/tofight/p/3230458.html
Copyright © 2011-2022 走看看