[ jquery ] 제이쿼리 무한스크롤 설명 및 예제 포함.

안녕하세요.

오늘 제이쿼리 무한 스크롤 방법에 대해서 설명 드리겠습니다.

아래를 보시면 소스 상에 설명이 들어가 있습니다. 우선 소스를 보시로

밑에서 따로 설명을 추가하겠습니다.

 

 
$(document).ready(function(){
    start.init();
});
var start = {
        param : {
            curPage : 1,
            pageListSize : 15,
        },
        
        init : function() {
           this.testData();
           this.testEvent();
        },
       testData : function() {
            this.setListItems("${firstData}"); // 첫 진입시 데이터 셋팅
        },
       testEvent : function() {
            // 무한 스크롤
            $(window).scroll(function() {
                // 맨 밑으로 스크롤이 갔을경우 if문을 탑니다.
                if($(window).scrollTop() == $(document).height() - $(window).height()) { 
                    start.param.curPage++; // 현재 페이지에서 +1 처리.
                    
                    start.testAjax(); //ajax 호출
                } 
            }); 
        },
        // 무한 스크롤 ajax 요청
        testAjax : function() {
            $.ajax({
                type     : 'POST',
                url      : '/test/ajax',
                data     : JSON.stringify(start.param), // 다음 페이지 번호와 페이지 사이즈를 가지고 갑니다.
                dataType : 'json',
                contentType: "application/json",
                success : successCallback,
                error : errorCallback
            });
            // 성공
            function successCallback(data) {
                if(data.testList.totListSize == 0 ){
                    $(".gridList").append('<div class="noList"><span>표시할 항목이 없습니다.</span></div>');
                } 
                if(JSON.parse(data.testList).length != 0){
                    testLoading.show(); //로딩 on(로딩바가 있을경우만 넣습니다. 없을경우 빼셔도 상관 없습니다.)
                    start.setListItems(JSON.parse(data.testList));  //테스트 데이터 리스트 입니다.
                    testLoading.hide(); //로딩 off(로딩바가 있을경우만 넣습니다. 없을경우 빼셔도 상관 없습니다.)
                }    
            }
            
            // 실패
            function errorCallback() {
                alert("실패");
            }
        },
        
        // 테스트 데이터 setting
        setListItems : function (list) {
            $.each(list, function(i, testData) {
                
                // 부모 엘리먼트에 append 할 데이터를 셋팅한다.
                var $li = $('<li>')
                                .append($('<div>').text(testData.name))
                                .append($('<div>').text(testData.phoneNm))
                                .append($('<div>')
                                .append($('<span>').text(testData.birth));
                                                    
                
                // 부모 엘리먼트에 append
                $('#test_list').append($li);
            })
        }
}
 

- init : 첫 진입 시 호출 함수 입니다.

- param : ajax 통신에서 데이터를 담을 함수입니다.

- bindData : 첫 진입 시 화면에 데이터를 셋팅 하기 위한 함수입니다.

- bindEvent : 무한스크롤을 위해 생성한 함수 입니다.

- testAjax : 스크롤이 해당 화면의 맨 밑에 닿았을 경우 ajax를 호출 하여

              데이터를 가져오기 위해 사용한 ajax 호출 함수 입니다.

- setListItems : 첫 진입 및 무한 스크롤을 할 경우 데이터를 셋팅해주기위한 함수입니다.

 

여기까지가 설명이였구요.

만약 궁금 하신 사항이 있을경우 댓글을 달아 주시면 감사하겠습니다.

 

이 글이 유용하셨다면 댓글 하나 적어주시면 감사하겠습니다.