码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-12-08 11:44:41      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:style   content   targe   on()   pos   set   ops   target   top   

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

 

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

标签:style   content   targe   on()   pos   set   ops   target   top   

原文地址:http://www.cnblogs.com/xiaoqian1993/p/6144229.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!