[JQuery] 데이터 조회시 로딩 이미지 보여주기(Ajax)

loading_image.zip

0.05MB

[JQuery] 데이터 조회시 로딩 이미지 보여주기(Ajax)

---

ajax 코드

$.ajax({
	type : "POST",
	url : currentHostPath+"요청주소",
	data : {
		key : value
	},
	// 로딩 이미지 보여주기
	beforeSend:function(){
		$('.wrap-loading').removeClass('display-none');
	},
	// 로딩 이미지 감추기
	complete:function(){
		$('.wrap-loading').addClass('display-none');
	},
	success : function(filePath) {
		printJS(filePath);
	},
	error : function(data) {
		console.log("fail: ",data);
	}
});

 

css

/* page-loading 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;

}

 

html

<div class="wrap-loading display-none">
	<div><img src="./images/loading1.gif"  style="width:50px" /></div>
</div>

 

* 참고문헌

https://skylhs3.tistory.com/4 

Ajax를 이용한 데이터 조회시 로딩 로딩 이미지 보이기(jquery이용)