使用scrollpagination实现页面底端自动加载无需翻页功能

当阅读到页面最底端的时候，会自动显示一个“加载中”的功能，并自动从服务器端无刷新的将内容下载到本地浏览器显示。 
这样的自动加载功能是如何实现的？jQuery的插件 ScrollPagination 可以帮助实现这个功能。

这里是ScrollPagination 功能的原型化代码，

$(function() {
    $(‘#content‘).scrollPagination({
        ‘contentPage‘: ‘democontent.html‘, // the page where you are searching for results
        ‘contentData‘: {}, // you can pass the children().size() to know where is the pagination
        // who gonna scroll? in this example, the full window
        ‘scrollTarget‘: $(window),
        // how many pixels before reaching end of the page would loading start?
        ‘heightOffset‘: 10,positives numbers only please
        ‘beforeLoad‘: function() { // before load, some function, maybe display a preloader div
            $(‘.loading‘).fadeIn();
        },
        // after loading, some function to animate results and hide a preloader div
        ‘afterLoad‘: function(elementsLoaded){
            $(‘.loading‘).fadeOut();
            var i = 0;
            $(elementsLoaded).fadeInWithDelay();
            // if more than 100 results loaded stop pagination (only for test)
            if ($(‘#content‘).children().size() > 100){
                $(‘#content‘).stopScrollPagination();
            }
        }
    });  

    // code for fade in element by element with delay
    $.fn.fadeInWithDelay = function(){
        var delay = 0;
        return this.each(function(){
            $(this).delay(delay).animate({opacity:1}, 200);
            delay += 100;
        });
    };
});  

这里可以看到jQuery Scroll Pagination的实现效果， 
http://andersonferminiano.com/jqueryscrollpagination/

只要将界面不断往下滚动就可以看到。

var page = 1;
$(function() {
    $(‘#getAjax‘).scrollPagination({
        ‘contentPage‘: ‘__ACTION__‘,
        // the url you are fetching the results
        ‘contentData‘: { id : {$Think.request.id}, pic : {$Think.request.pic}, ps : {$ps}, pn : function(){return page} },
        // 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() {
            page = page + 1;
        },
        ‘afterLoad‘: function(elementsLoaded) { // after loading content, you can use this function to animate your new elements
            $(elementsLoaded).fadeInWithDelay();
        }
    });  

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