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();
