0

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

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

4

1 回答 1

0

好的，我首先在这里做 2 个假设，即您正在调用使用滚动侦听器提供的代码。其次，您可能想稍后调用相同的代码。

要停止它，您需要创建一个标志以便它停止调用（或者如果您以后不想使用它，则取消绑定滚动），要对结果进行分页，您需要创建一个变量来计算您实际显示的页面但您还需要修改处理 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-23T05:48:10.480 回答