Umut Muhaddisoglu씨가 Wikia Search나 국내 사이트로는 Mixsh 등에서 볼 수 있던 무한 스크롤 패턴을 구현하셨습니다.

다른 구현물들도 많았지만, 이것은 jQuery를 사용한 제대로 된 것입니다. 이렇게 작동한다고 합니다:
  • 사용자가 스크롤을 내려 끝에 도달하면 함수가 호출됩니다.
  • 이 함수는 datagrid의 마지막 DIV ID를 가져옵니다.
  • 이 DIV ID를 포함해 쿼리를 보냅니다.
  • 결과가 돌아오면 datagrid의 마지막에 그들을 추가합니다.
데모는 Umut 씨의 DNS Pinger 서비스에서 스크롤을 다운하면 보실 수 있습니다. 데모의 일부분들입니다:

HTML 구조는 이렇습니다:
[code:js]
<div class="wrdLatest" id=9>content</div>
<div class="wrdLatest" id=8>content</div>
아래 함수는 로딩 아이콘을 보여주고, 그 후 새로운 컨텐트로 그 영역을 채웁니다:
[code:js]
function lastPostFunc()
{
    $(’div#lastPostsLoader’).html(’<img src="bigLoader.gif"/>’);
    $.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),  
 
    function(data){
        if (data != "") {
        $(".wrdLatest:last").after(data);          
        }
        $(’div#lastPostsLoader’).empty();
    });
};
스크롤 검출 부분입니다:
[code:js]
$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
});

from Implementing infinite scrolling with jQuery on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 1

티스토리 툴바