는 blogspot에서 9gag처럼 아래로 스크롤 할 때 자동으로 이전 게시물을로드합니다.

Question

내 블로그 : http://9gago.blogspot.com/ 블로그/blogspot에서 만든 블로그입니다.이 기능을 원할 경우 이전 게시물을로드하여 사용자가 그럴 필요가 없습니다. 이전 게시물이 페이지의 마지막 게시물에 도달 할 때마다 클릭하십시오. 다음은 정확하게 http://9gag.com/이거나 사용했던 사이트입니다.

Answer 1

내가 좋아할만한 구현이 하나 있습니다. 몇 가지 다른 방법으로이 작업을 수행 할 수있는 몇 가지 방법이 있습니다.

먼저 그리드에 표시 할 데이터의 키를 어딘가에 저장해야합니다. 이것은 사실상 순차적 인 키를 가지고 있다고 가정합니다. 자동 증가 정수가 작동합니다.

그리드의 태그는 다음과 같이 보일 수 있습니다

<div class="content" id="7">some stuff</div> 
<div class="content" id="8">another row of stuff</div> 
<div class="content" id="9">another row of stuff</div> 

그런 다음 당신은 또한 데이터의 다음 배치를 잡을 것 "로드"아이콘을 표시하는 기능이 필요합니다. 그리드의 마지막 요소에있는 ID를 사용하여 다음 20 개 (또는 원하는 경우) 행의 데이터를 가져 오는 쿼리를 서버 측에서 실행합니다.

function lastRow() 
{ 
    $('div#lastRowLoader').html('<img src="spinner.gif"/>'); 
    $.post('dataUrl?action=getNextRows&lastId=' + $('.content:last').attr('id'), 
     function(data){ 
      if (data != '') { 
      $('.content:last').after(data);   
      } 
      $('div#lastRowLoader').empty(); 
     }); 
    }; 

그런 다음 사용자를 감지하는 마지막 기능이 페이지 끝까지 스크롤되었습니다.

$(window).scroll(function(){ 
    if ($(window).scrollTop() == $(document).height() - $(window).height()){ 
     lastRow(); 
    } 
}); 

분명히, 게시물 코드를 통해 DOM을 통해 페이지에 데이터를로드해야합니다. 나는이 코드를 작성하여 개념적으로 무엇이 필요한지 보여줍니다. 귀하의 마크 업은 다를 것이고 귀하의 그리드는 Sencha Ext JS에서부터 손으로 굴리는 것에 이르기까지 다양합니다.

희망적으로 이것은 바퀴가 당신을 위해 돌아 오기에 충분합니다.