jQuery 스크롤 페이징

JAVASCRIPT 2011. 3. 14. 18:18 Posted by Dayis
mixsh나 twtkr등에서 스크를 마지막에 가면 자동으로 다음 글들을 불러 오게 하는 자료입니다.
JQUERY로 짜여졌고 간단합니다.

엄청나게 간단하네요....;;;

링크에 실제 배포하는 사이트 남겨 두었습니다.

샘플보기(스크롤해서 내려 보세요) :
http://www.webresourcesdepot.com/dnspinger/


구조설명:

컨텐츠 페이지 구조
<div class="wrdLatest" id=1>content</div>
<div class="wrdLatest" id=2>content</div>
<div id="lastPostsLoader"></div>

로딩중 이미지 보여주는 부분과 실제 데이터 가져오는 부분
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();
    });
};

스크롤 감지하는 부분
$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
          lastPostFunc();
        }
});

'JAVASCRIPT' 카테고리의 다른 글

자바스크립트 타이머  (0) 2011.07.13
jQuery 페이지내 Anchor로 이동  (0) 2011.05.04
jQuery로 ajax실행 중 로딩이미지  (0) 2010.12.22
jQuery.ajax()를 이용한 페이지 실행  (0) 2010.12.21
JQuery select box  (0) 2010.12.20