waypoint.js로 무한 스크롤하는 법?

Question

그래서 여기에 있습니다. 나는 "home.html"이라는 html 문서를 가지고있다. 여기에는 여러 div가 포함되어 있으며 각 div는 단일 게시물입니다. 나는 또한 index.html을 가지고 있고 거기에 div #content가있다. 내용은 index.html에서 비어 있지만 .load() 호출을 통해 home.html의 div로 채워집니다. 또한 div : nth-child (-n + 10)를 .load 호출에서 사용하면 처음 10 개의 게시물 만로드 할 수 있습니다. waypoint.js를 사용하여 무한 스크롤을 추가하려면 어떻게해야합니까? 스크롤 막대가 바닥의 75 %에 도달하면 home.html에서 다음 10 개의 div를로드합니다.

Answer 1

페이지에 10 개의 요소를로드 한 후 jquery 중간 지점을 연결하여 조치를 트리거합니다.

조치의 첫 번째 단계는 중간 지점으로 사용 중지하는 것입니다 (따라서 한 번만 발동됩니다). 그런 다음 아약스를 통해 추가 데이터를로드하고이를 페이지에 렌더링합니다. (콜백을 통해) 완료되면 사용자가 웨이 포인트를 다시 시작할 때 웨이 포인트가 다시 활성화되므로 사용자가 웨이 포인트를 아래로 스크롤 할 때 프로세스가 다시 시작됩니다.

응용 프로그램에서로드되는 요소 수를 추적하여 올바른 번호를 요청할 수 있습니다. 즉, 10은로드되어 다음 요청은 10에서 가져오고 10은 다음부터 시작해야합니다. 20 및 10 가져 오기, 등).

"아래쪽으로가는 길의 75 %"는 중간 지점에서 쉽게 구성 할 수 있습니다. 이를 위해 "오프셋"을 사용합니다.

체크 아웃 waypoint documentation

은 내가 더 많은 콘텐츠를로드로, 그것은 자동으로 아래로 밀어 그래서,이 메인 그리드의 아래에 내 무한 스크롤을 트리거하는 DOM 요소를 넣어.

Answer 2

저는 jquery masonry + waypoint js를 사용했습니다. 그러나 masonry callback에 waypoint를 등록하지 않으면, ajax 호출과 함께 제공되는 항목이 두 번 이상로드됩니다. 여기에 내 해결책이 있습니다.

//INFINITE SCROLL 
    var $loading = $("#itemsloading"), 
    $footer = $('footer'), 
    opts = { 
     offset: '120%', 
     onlyOnScroll:false 
    }; 

    $footer.waypoint(function(event, direction) { 
     $footer.waypoint('remove'); 
      $loading.toggle(true); 
      $.get($('.more').attr('href'), function(data) { 
       var $data = $(data.result[0]); 
       if($(data.result[0]).length==0){ 
        $loading.toggle(false); 
        return false; 
       } 
       $('#items').append($data).masonry('appended', $data, true, 
         function(){ 
          $footer.waypoint(opts); 
          }); 
       $loading.toggle(false); 
      }); 
    }, opts);