zoukankan      html  css  js  c++  java
  • 使用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;  
            });  
        };  
    });  
  • 相关阅读:
    Sql中关于日期的格式化
    linq中存储过程返回集合存在的问题
    当页面请求数据是从静态页中获取的Post方法会报405的错误
    jquery中load方法在ie下会卡住
    jquery用div实现下拉列表的效果
    jquery获取服务器端控件的方法
    【转】jquery实现文本框有提示输入的信息
    toString()方法浅谈
    Object类与上下转型
    多态
  • 原文地址:https://www.cnblogs.com/xiaoqian1993/p/6144229.html
Copyright © 2011-2022 走看看