My Dev Blog

Ajax 통신 시 로딩바를 구현하는 방법은 여러 많은 블로그에서 확인할 수 있다.

여기서는 submit이나 location.href와 같은 페이지 이동 시 로딩바를 구현하는 방법에 대해 알아보자

1. 로딩바 gif 파일 다운로드

2. 프로젝트 이미지 폴더 안에 로딩바 gif 파일 넣기 (ex : img src='/images/loadingbar.gif')

3. script 태그 안 submit or location.href 전에 로딩바와 로딩 시 보여줄 배경 추가 후 보여주기

<script type="text/javascript">

	function save() {
		var backHeight = $(document).height(); // 로딩 시 보여줄 배경 높이
	   	var backWidth = window.document.body.clientWidth; // 로딩 시 보여줄 배경 너비
	   	var backGroundCover = "<div id='back'></div>";
	   	var loadingBarImage = "";
	   	loadingBarImage += "<div id='loadingBar'>";
		loadingBarImage += "     <img src='/images/loadingbar.gif' width='100' height='100'/>"; // 로딩바 이미지
		loadingBarImage += "</div>";
		$('body').append(backGroundCover).append(loadingBarImage);
		$('#back').css({ 'width':backWidth, 'height':backHeight, 'opacity':'0.3' });
		$('#back').show();
		$('#loadingBar').show();
		
		// 1. submit
		$('#saveForm').attr('method', 'POST');
		$('#saveForm').attr('action', '/save');
		$('#saveForm').submit();
		
		// 2. location.href
		var url = '/save'; 
		location.href = url;
	}
    
</script>

4. style 태그 안 코드 추가

<style type="text/css">

	#back {
		position:absolute;
		z-index:100;
		background-color:#000000;
		display:none;
		left:0;
		top:0;
	}
    
	#loadingBar { 
		position:absolute;
		left:50%;
		top:40%;
		display:none;
		z-index:200;
	}
    
</style>

Ajax 통신 시 complete 시점에서 아래 코드가 필요하지만 submit or location.href의 경우 페이지 이동에 의해

로딩바와 로딩 시 보여준 배경이 자동으로 숨김 및 제거된다.

$('#back, #loadingBar').hide();
$('#back, #loadingBar').remove();