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

Posted 2020-08-22 小!千

当阅读到页面最底端的时候，会自动显示一个“加载中”的功能，并自动从服务器端无刷新的将内容下载到本地浏览器显示。 
这样的自动加载功能是如何实现的？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;  
        });  
    };  
});