riix
6/20/2013 - 2:28 AM

무한 스크롤 구현

무한 스크롤 구현

(function(){
  // 목록 마지막 요소 흐림처리
	$('ul.list-a').addClass('infinite-scroll');
});

var count = 2;

// 스크롤 이벤트
$(window).on('scroll',function () {
	infiniteScroll();
});

// 스크롤 감지 및 호출
function infiniteScroll(){
	var deviceMargin = 0; // 기기별 상단 마진
	var $scrollTop = $(window).scrollTop();
	var $contentsHeight = Math.max($('body').height(),$('#body').height());
	var $screenHeight = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight; // 스크린 높이 구하기

	if($scrollTop ==  $contentsHeight - $screenHeight) {
		if($('#searchbar').is(':visible')){ return false; }
		loadArticle(count);
		count++;
	}
}

// ajax 로드
function loadArticle(pageNumber){
	preloader('show');
    $.ajax({
		type: 'GET',
		url: "_ajax.html",
		data: "page="+pageNumber,
		cache: false,
		success: function(html){
			setTimeout(function(){ // 시간 지연
				$('#list').append(html);
				preloader('hide');
			}, 1000);
		}
    });
	return false;
}