jQuery로 무한 스크롤 구현

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

'[IT] Web Tech' 카테고리의 다른 글

UberHour YouTube 게임  (0)	2008.06.12
Canvas Quest : JavaScript로 만든 RPG 게임  (0)	2008.06.12
JavaScript HTML 생성 벤치마크  (0)	2008.06.12
W3C Progress Events 1.0 초안  (0)	2008.06.12
jQuery로 무한 스크롤 구현  (1)	2008.06.12
WiiExtJS: Wii Opera 브라우저에서 구동되는 Ajax 프로그램 만들기  (0)	2008.06.12
Nexaweb, dojo.E 마크업과 런타임 발표  (0)	2008.06.12
SquirrelFish: 기술적인 흥미  (0)	2008.06.12
IE 8 beta 2, 8월 출시 예정  (0)	2008.06.12