仿微博 无限滚动加载技术

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

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