用jquery和php无限滚动

时间:2012-01-07 10:51:55

标签: php jquery ajax scroll

我使用此功能在我的页面上创建一个infite滚动。当我滚动到底部时,它会显示默认div(onload)和一个带div的批处理。但是当我添加批处理时再次滚动到底部时,它不会触发loadmore.php函数。它说:没有更多的帖子要显示 我究竟做错了什么?

<div id="wrapper">
        <div id="postswrapper">
            <div class="postitem" id="4"><img src="http://ww.supair.fr/photos_cam1_fixe/image.jpg" /></div><div class="postitem" id="5"><img src="http://www.bormioonline.com/imagesntent/webcam/webcam06-320x240right.jpg" /></div>

         </div>


<script type="text/javascript">
var loading = false;

$(window).scroll(function(){
    var h = $('#postswrapper').height();
    var st = $(window).scrollTop();

     // the following tests to check if 
     // 1. the scrollTop is at least at 70% of the height of the div, and 
     // 2. another request to the ajax is not already running and 
     // 3. the height of the div is at least 500. 
     // You may have to tweak these values to work for you. 
    if(st >= 0.7*h && !loading && h > 500){
        loading = true;
        $('div#loadmoreajaxloader').show();
        $.ajax({
            url: "/test2/loadmore.php?lastid=" + $(".postitem:last").attr("id"),
            success: function(html){
                if(html){
                    $("#postswrapper").append(html);
                    $('div#loadmoreajaxloader').hide();
                }else{
                    $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                }
                loading = false;
            }
        });
    }
});

0 个答案:

没有答案