<script type="text/javascript"> $(document).ready(function () { var pageSize = $('#pageSize').val(); var totalPage = ((parseInt($('#myStatusTotalcount').val() / pageSize) + 1)) $("#divReplyList").load("ReplyList.aspx?PageNo=" + parseInt($('#pageNo').val()) + "&pageSize=" + pageSize, startScroll()); function startScroll() { $("#divReplyList").scroll(function () { if ($("#pageLastYN").val() == "N") { var elem = $("#divReplyList"); if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) { $("#pageNo").val(parseInt($('#pageNo').val()) + 1); var currentPage = parseInt($('#pageNo').val()); if (currentPage <= totalPage) { $("#divtempMyStatus").load("ReplyList.aspx?PageNo=" + currentPage + "&pageSize=" + pageSize, function (text, status) { $(".listTb:last").after($("#divtempMyStatus").html()); $("#divtempMyStatus").html(""); }); $("#divReplyList").unbind(); window.setTimeout(function () { startScroll(); }, 100); } else { alert("마지막 페이지 입니다"); $("#pageLastYN").val("Y"); } } } }); } }); </script>
붉은 색 부분은 스크롤을 내렸을때 거의 마지막 부분에서 2번을 서버 콜한다. 이러한 것을 방지하기 위한 코드이다. 위의 스크립트 에서 붉은 색으로 된 부분은 수정하여 사용하도록 해야하한다. 0.1초마다 자신을 호출하는 코드는
누가 보아도 좀 부족해 보인다. 팁을 하나 주자면 settimeout을 주되 전역번수에 값을 셋팅하여 비교하는 식으로 하면
더 좋을 듯싶다.
<input id="pageNo" type="hidden" value="1" /> <input id="pageSize" type="hidden" value="10" /><input id="pageLastYN" type="hidden" value="N" />
<input id="myStatusTotalcount" type="hidden" value="<%=StatusCount%>" /><div id="divtempMyStatus" style="display:none;"></div><div id="divReplyList" style="overflow:scroll; width:670px; height:430px; overflow-x:hidden; ">
Javascript/Jquery