使用jQuery无限滚动 [英] infinite scrolling using jQuery

问题描述

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

The script is working fine, but when the content ends, the page never reaches to the end. I need to make it stop infinite scrolling when the loaded content is end.

另一个问题，我不想立即加载所有div，我需要每5个中的5个加载一次，我该怎么做?

Another question, i dont want to load all the divs right away, i need to load it every five in five, how can i do that?

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>

and the loadmore.php contains many <div class="item">content</div>

推荐答案

好吧，我首先在这里做出2个假设，即您正在调用使用

Ok I'm making 2 assumptions here first that you're calling the code you provided using the scroll listener. Second you might want to call the same code later.

要停止它，您需要创建一个标志，使其停止进行调用(或者，如果您以后不想使用滚动条，则取消滚动的绑定)，要对结果进行分页，您需要创建一个变量来计算您的页面重新显示，但您还需要修改处理ajax请求的代码，以便它使用我们发送的页面数据.

To stop it you need to create a flag so it stop making the calls (or unbind the scroll if you dont want to use the same later), to paginate your results you need to create a variable that count the page you're actually showing but also you need to modify the code processing the ajax request so it uses the page data we're sending.

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无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！