jQuery로 무한 스크롤 구현
[IT] Ajaxian 2008/06/12 02:48 |
Umut Muhaddisoglu씨가 Wikia Search나 국내 사이트로는 Mixsh 등에서 볼 수 있던 무한 스크롤 패턴을 구현하셨습니다.
다른 구현물들도 많았지만, 이것은 jQuery를 사용한 제대로 된 것입니다. 이렇게 작동한다고 합니다:
HTML 구조는 이렇습니다:
from Implementing infinite scrolling with jQuery on Ajaxian
다른 구현물들도 많았지만, 이것은 jQuery를 사용한 제대로 된 것입니다. 이렇게 작동한다고 합니다:
- 사용자가 스크롤을 내려 끝에 도달하면 함수가 호출됩니다.
- 이 함수는 datagrid의 마지막 DIV ID를 가져옵니다.
- 이 DIV ID를 포함해 쿼리를 보냅니다.
- 결과가 돌아오면 datagrid의 마지막에 그들을 추가합니다.
HTML 구조는 이렇습니다:
[code:js]
<div class="wrdLatest" id=9>content</div>
<div class="wrdLatest" id=8>content</div>
아래 함수는 로딩 아이콘을 보여주고, 그 후 새로운 컨텐트로 그 영역을 채웁니다:<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();
});
};
스크롤 검출 부분입니다: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();
}
});
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});
from Implementing infinite scrolling with jQuery on Ajaxian
'[IT] Ajaxian' 카테고리의 다른 글
| 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: 기술적인 흥미 (1) | 2008/06/12 |
| IE 8 beta 2, 8월 출시 예정 (0) | 2008/06/12 |
Posted by 행복한고니