jQuery를 사용하여 무한 스크롤

Question

스크립트는 정상적으로 작동하지만 내용이 끝나면 페이지가 끝까지 도달하지 않습니다. 로드 된 컨텐츠가 끝날 때 무한 스크롤을 중지해야합니다.

또 다른 질문으로, 모든 div를 즉시로드하고 싶지 않습니다. 매 5 초마다 5를로드해야합니다. 어떻게해야합니까?

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

내가 처음 여기에 2 개 가정을 만들고있어 코드를 호출하고 있는지 확인 scroll listener을 사용하여 제공했습니다. 두 번째로 나중에 동일한 코드를 호출 할 수 있습니다.

멈추려면 호출을 중단하거나 나중에 같은 것을 사용하지 않으려면 스크롤을 언 바인드하는 플래그를 만들어야합니다. 결과를 페이지 매기기하려면 페이지를 계산하는 변수를 만들어야합니다. 실제로 보여 주지만 아약스 요청을 처리하는 코드를 수정하여 보내려는 페이지 데이터를 사용해야합니다.

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>'); 
       } 
      } 
     }); 
    } 
});