使用jQuery无限滚动

该脚本工作正常，但是当内容结束时，页面永远不会到达结尾。当加载的内容结束时，我需要停止无限滚动。使用jQuery无限滚动

另一个问题，我不想立即加载所有的div，我需要加载它每五五，我该怎么做？

JS：

if($(window).scrollTop() == $(document).height() - $(window).height()) 
    { 
        $('div#loadmoreajaxloader').show(); 
        $.ajax({ 
        url: "loadmore.php", 
        success: function(html) 
        { 
            if(html) 
            { 
                $("#postswrapper").append(html); 
                $('div#loadmoreajaxloader').hide(); 
            }else 
            { 
                $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>'); 
            } 
        } 
        }); 
    }

HTML：

<div id="postswrapper"> 
    <div class="item">content</div> 
    ... 
    <div id="loadmoreajaxloader" style="display:none;"><center><img src="bigLoader.gif" /></center></div> 
</div>

和loadmore.php包含许多<div class="item">content</div>

来源

2013-01-23 Ramon Vasconcelos

当你调用这个函数。 –

我把它叫做索引文件（不是外部的js）。如果你检查$（window）.scrollTop（）和$（document）.height（） - $（window）.height（）的值，那么它里面的'$（function（）{....}）' –

。它将永远说0 ...我测试了我不知道你是怎么称呼它的。 –

好，我正在做2个假设在这里第一次，我们在调用的代码你提供使用scroll listener。其次，您可能想稍后调用相同的代码。

要停止它，您需要创建一个标志，以便停止进行调用（或者如果您不想以后再使用它，请解除滚动），为分页结果创建一个变量来计算页面实际上显示，但你也需要修改处理ajax请求的代码，以便它使用我们发送的页面数据。

flag = true; //Flag to identify if the code should request more results 
page = 1; //Current page 
$(document).scroll(function(){ 
    if(flag && ($(window).scrollTop() == $(document).height() - $(window).height())) 
      { 
      $('div#loadmoreajaxloader').show(); 
      $.ajax({ 
      url: "loadmore.php", 
     data: {page:page} 
      success: function(html) 
      { 
       if(html) 
       { 
        $("#postswrapper").append(html); 
        $('div#loadmoreajaxloader').hide(); 
        page++; 
       }else 
       { 
        flag = false; 
        $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>'); 
       } 
      } 
     }); 
    } 
});

来源

2013-01-23 05:48:10

使用jQuery无限滚动

回答

相关问题