Question

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

另一个问题，我不想立即加载所有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>

Answer 1

好的，我首先在这里做出两个假设，即您使用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>');
              }
            }
        });
    }
});

使用jQuery进行无限滚动

1 个答案: