您的位置:首页 > Web前端 > jquery > 正文

jquery实现页面滚动时自动加载内容

更多 时间:2013-9-17 类别:Web前端 浏览量:1626

jquery实现页面滚动时自动加载内容

jquery实现页面滚动时自动加载内容

我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果,其实现原理一般是:通过ajax提交到服务器,然后返回一个信息,是否成功,如果成功了。就使用Dom来把当前的内容,插入到原本的内容后面。

 

实例代码:

 

  •  
  • JScript 代码   复制
  • 
    var loading = false;
    
    $(window).scroll(function(){
    
        if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
    
            if(loading == false){
    
                loading = true;
    
                $('#loadingbar').css("display","block");
    
                $.get("url?start="+$('#loaded_max').val(), function(loaded){
    
                    $('body').append(loaded);
    
                    $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
    
                    $('#loadingbar').css("display","none");
    
                    loading = false;
    
                });
    
            }
    
        }
    
    });
    
     
    
    $(document).ready(function() {
    
        $('#loaded_max').val(50);
    
    });
    			

     

  •