- Ajax를 이용한 데이터 조회시 로딩 로딩 이미지 보이기(jquery이용) 목차
홈페이지를 볼 때 가끔 조회하는 동안 로딩 이미지를 보게 됩니다. 저도 잘 몰랐는데 너무 간단하네요.
다음과 같이 jquery에서 지원하는 ajax함수인데요.
beforeSend에서 이미지를 보여주고 complete에서 이미지를 감추면 끝입니다.
말그대로 요청 보내기전에 이미지를 보여주고 응답이 완료되면 어미지를 감추는것이죠.
$.ajax({
type:"POST"
,url: "서버주소"
,data:"파라미터"
,success:function(res){
(조회성공일 때 처리)
}
,beforeSend:function(){
(이미지 보여주기 처리)
$('.wrap-loading').removeClass('display-none');
}
,complete:function(){
(이미지 감추기 처리)
$('.wrap-loading').addClass('display-none');
}
,error:function(e){
조회 실패일 때 처리
}
,timeout:100000 "응답제한시간 ms"
});
추가로 그냥 스타일 class로 이미지 보여주는 스타일과 감추는 스타일 정의 해놓면 편하겠지요.
<style type="text/css" >
.wrap-loading{ /*화면 전체를 어둡게 합니다.*/
position: fixed;
left:0;
right:0;
top:0;
bottom:0;
background: rgba(0,0,0,0.2); /*not in ie */
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000'); /* ie */
}
.wrap-loading div{ /*로딩 이미지*/
position: fixed;
top:50%;
left:50%;
margin-left: -21px;
margin-top: -21px;
}
.display-none{ /*감추기*/
display:none;
}
</style>
<div class="wrap-loading display-none">
<div><img src="./images/loading1.gif" /></div>
</div>
그리고 위와 같이 해서 제 테스트 페이지에 적용한 결과는 다음과 같습니다.
ajax조회전화면이 다음과 같을 때
조회할때는 이렇게 되는겁니다.
