//list.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script src="/js/jquery.js"></script>
<script>
function getReadList() {
$('#loading').html('데이터 로딩중입니다.');
//ajax
$.post("data.html?action=getLastList&lastID=" + $(".list:last").attr("id"),
function(data){
if (data != "") {
$(".list:last").after(data);
}
$('#loading').empty();
});
};
//무한 스크롤
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()){
getReadList();
}
});
</script>
</head>
<body>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list">content</div>
<div class="list" id="9">content</div>
<div id="loading"></div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------
//data.html
<?
$action = $_POST['action'];
$list_id = $_POST['lastID'];
?>
<div>Data1</div>
<div>Data2</div>
<div>Data3</div>
<div>Data4</div>
<div>Data5</div>
<div>Data6</div>
<div>Data7</div>
<div>Data8</div>
<div>Data9</div>
<div>Data10</div>
<div>Data11</div>
<div>Data12</div>
<div>Data13</div>
<div>Data14</div>
<div>Data15</div>
<div>Data16</div>
<div>Data17</div>
<div>Data18</div>
<div>Data19</div>
<div>Data20</div>
<div>Data21</div>
<div>Data22</div>
<div>Data23</div>
<div>Data24</div>
<div>Data25</div>
<div>Data26</div>
<div>Data27</div>
<div>Data28</div>
<div>Data29</div>
<div>Data30</div>
출처 : http://webresourcesdepot.com/load-content-while-scrolling-with-jquery/
'jQuery' 카테고리의 다른 글
| [jQuery] $._data($("selecter")[0], 'events' ) - has a event 이벤트를 가지고 있는지 체크 (0) | 2016.03.07 |
|---|---|
| [jQuery] slice() - start, end 까지 index 요소 선택 between (0) | 2016.03.07 |
| [jQuery] event.data trigger - 이벤트 데이터 전달 (0) | 2016.03.03 |
| [jQuery] is() - 요소가 맞는지, 속성을 가지고 있는지 확인 hasAttribute (0) | 2016.02.24 |
| [jQuery] end() - 메서드 체인에서 이전요소 재선택 (0) | 2016.02.17 |
