jQuery 무한 스크롤(Infinite scroll) 플러그인 jScroll 사용법

무한 스크롤은 페이지의 내용을 아래로 스크롤하면 새로운 내용이 덧붙여져서 많은 양의 컨텐츠를 동일한 페이지에 계속해서 보여주는 방법입니다. 이러한 기능을 구현해주는 jScroll은 jQuery 플러그인으로 만들어져 있으며, MIT와 GPL v2 의 듀얼 라이선스로 제공되어 집니다. 글 마지막에 예제 전체 소스를 첨부 했습니다.

1. 다음 사이트에서 프로그램을 다운 받습니다.(http://jscroll.com/)

- 다운로드 링크는 Github로 연면됩니다. 필요한 파일은 jquery.jscroll.js 만 있으면 됩니다.

2. 필요한 파일을 포함합니다.

- jQuery 플러그인이므로 jQuery가 먼저 필요합니다.

- 다음받은 jquery.jscroll.js 파일을 포함하니다.

- 무한 스크롤을 수행할 코드를 작성합니다.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./jquery.jscroll.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
    $('#autoScroll').jscroll({
        autoTrigger: true,
        loadingHtml: '<div class="next"><img src="./images/loading.gif" alt="Loading" /></div>',
        nextSelector: 'a.nextPage:last'
    });
});
//]]>
</script>

- $('#autoScroll').jscroll(); 은 페이지 내에서 id가 autScroll 인 요소에 무한 스크롤을 실행합니다.

- autoTrigger는 스크롤시 다음 컨텐츠를 자동으로 가져올지 지정합니다. true이면 아래로 스크롤하면 자동으로 다음  내용을 가져오고, false이면 링크를 클릭해야 다음 내용을 가져옵니다. 기본값은 true 입니다.

- 파라미터로 주어진 loadingHtml 은 새로운 컨텐츠를 불러올때 로딩 표시를 하는 html을 지정합니다.

- nextSelector는 컨텐츠중 다음 페이지를 불러올 링크를 찾는데 사용됩니다. 기본 값은 "a:last"로 컨텐츠 중의 마지막 <a> 태그를 사용합니다. 마지막 페이지에 링크가 있으면 오류가 발생하므로 여기서는 'a.nextPage:last'로 지정하여 nextPage 클래스를 가지는 <a> 태그중 마지막 것을 선택하도록 하였습니다.

3. 무한스크롤이 이루어질 페이지 영역 입니다.

- id가 autoScroll 인 요소를 지정합니다.

- 기본적으로 이미지 두 개가 보여집니다. 영역내의 마지막에 나오는 링크가 스크롤시 다음 내용을 불러올 링크입니다. 이 링크는 실제 화면에 보이지는 않게 처리 됩니다.

<div class="scroll" id="autoScroll">
    <div>
    <img src="./images/IMGP8563.JPG" width="400" />
    <img src="./images/IMGP8564.JPG" width="400" />
    </div>
    <div class="next"><a href="contents.php?mode=auto&page=2" class="nextPage">다음 페이지</a></div>
</div>

4. 테스트용 서버측 구현입니다.

- page 파라미터를 이용해서 다음에 보여줄 컨텐츠를 지정합니다.

- 간단한 예제라 빠르게 로딩이 되어 버려서 컨텐츠가 추가되는것이 표시가 나지 않으므로, sleep(1); 을 이용해서 페이지 로딩에 1초씩 지연을 줬습니다.

- 마지막 페이지에는 다음 페이지로의 링크가 없습니다.

<?php
$page = $_GET['page'];
$mode = $_GET['mode'];
$start = 65;

if($mode == "auto") {
    sleep(1);
    
    $no1 = ($page - 2) * 2 + $start;
    $no2 = $no1 + 1;
    $nextPage = $page + 1;
    
    echo('<div>');
    echo('<img src="./images/IMGP85'.$no1.'.JPG" width="400" /> ');
    echo('<img src="./images/IMGP85'.$no2.'.JPG" width="400" /> ');
    echo('</div> ');
    if($page < 5) {
        echo('<div class="next"><a href="contents.php?mode=auto&page='.$nextPage.'" class="nextPage">다음 페이지</a></div>');
    }
}
?>

5. 실행 결과 입니다.

6. jScroll에 사용되어지는 파라미터 목록입니다.

파라미터	기본값	설명
debug	false	디버깅 정보가 console로 출력됩니다.
autoTrigger	true	true 이면 다음 페이지를 미리 자동으로 로딩하고, 나머지는 스크롤시 로딩 됩니다. false이면 다음 페이지 링크를 클릭해야 로딩됩니다.
autoTriggerUntil	false	1 이상의 숫자를 지정하면 지정된 페이지 까지는 자동 로딩되고, 나머지는 링크를 클릭해야 로딩됩니다. autoTrigger가 true 로 설정되어야 동작합니다.
loadingHtml	'<small>Loading...</small>'	로딩중 표시를 지정합니다.
padding	0	하단의 얼마까지 스크롤 하면 다음 페이지를 로딩할지를 지정합니다. 기본값은 0으로 끝까지 스크롤해야 로딩합니다.
nextSelector	'a:last'	다음 페이지를 가져올 링크를 지정합니다. 기본값을 <a> 태그중 마지막 입니다.
contentSelector	''	응답받은 내용을 일부만 사용할 경우 사용할 요소를 찾는 선택자 입니다. 기본값을 전체를 사용합니다.
callback	false	이 옵션에 함수를 지정하면 각 페이지 로드가 끝날 때 호출됩니다.

※예제소스

jscroll.zip