JQuery 와 AJAX 를 통 해 페이지 데이터 의 동적 로드 를 실현 합 니 다.

JQuery 에 대해 잘 모 르 겠 습 니 다. 구 글 사진 의 다음 페이지 넘 기 는 효 과 를 실현 하고 싶 습 니 다. 문 을 닫 고 차 를 만 들 고 드디어 해결 되 었 습 니 다.
다른 실현 방식 을 잘 모 르 고 좋 은 실현 방식 으로 토론 해 보 자.
제 실현 방식 은 어렵 지 않 습 니 다. 주의해 야 할 부분 은 바로 자 물 쇠 를 설정 하여 onscroll 사건 이 발생 한 후에 ajax 를 여러 번 호출 하지 않도록 하 는 것 입 니 다.
또한 정적 데이터 내용, 예 를 들 어 단체 구 매 사이트 의 매일 단체 구 매 내용 이 변화 하지 않 으 면 데이터 의 총 수량 을 기록 할 수 있다.매번 수량 이 증가 하기 때문에 수량 이 증가 하지 않 으 면 데이터 가 없다 는 뜻 이 므 로 ajax 요청 을 하지 않 고 배경 압력 을 줄 입 니 다.데이터 가 동적 으로 새로 고침 되 었 다 면 구 글 그림 같은 것 은 이 걸 사용 할 수 없습니다.
이 예 에 서 는 음반 마 트 의 음반 으로 각 음반 상자 의 높이 가 고정 되 어 있다.음반 슈퍼마켓 의 데이터 도 기본적으로 정적 이다.
대략적인 흐름 은:
onscroll 데이터 새로 고침 조건 - > ajax 로 데이터 가 져 오기 - > 데이터 목록 div 에서 appendTo 를 통 해 데 이 터 를 추가 합 니 다.
구체 적 인 코드 는 다음 과 같다.

var lastSize = 0;//      ，        （           ）
var doing = false;// ，     onscroll         ，      
window.onscroll = function() {
	if(doing ==true)
		return;
	var scrollHeight = $(document).scrollTop();//      
	var listBoxHeight = $('.list_box').height(); //           
	if(scrollHeight >  listBoxHeight){ 
		var discSize = $("#discSize").val(); //        
		var allHeight = $(document).height(); 	
		
		if(allHeight - scrollHeight -listBoxHeight*3 < 0 && discSize!=lastSize){//      （      ），           
			doing = true;//  
			lastSize = discSize;//          size，          
			ajaxGetDiscList(false);
			doing =false;//   
		}	
	} 
}
function ajaxGetDiscList(refresh){ 
	$.get("..  url",
		{ ..    }
		,function(result){
			if(refresh==true)//          ，    DIV   
				$('#shop_con').html(result);
			else{ //            
				$(result).appendTo($('#shop_con'));
			}
    	}
  	);
}

밟 은 형 들 은 의견 남기 고 가 야 지.