[jQuery] Ajax 실행 시, 로딩바 구현하기

1. 필요

 - Ajax 로딩 시, 비동기화가 아닌이상 페이지가 멀뚱 멀뚱 멈추게 된다.

 - 당연히, 사용자는 멈춘걸로 인식을 하게 된다.

 - 비지니스 로직은 A ~ Z 까지 스텝 바이 스텝으로 이뤄지기 때문에 비동기화는 안된다.

 - 즉, 뭔가 동작을 하고 있다고 사용자에게 어필을 하는 것이 ajax 로딩바를 넣어야하는 이유이다.

 - 다행이도 jQuery에서는 이러한 점을 감안하여 함수를 제공하고 있다. 

 - 그 함수가 ajaxStart() 와 ajaxStop() 함수이다.

 - 아래 소스는 개인별로 커스터마이징 하면 된다.

2. 소스

 1) CSS

<style>

/* 로딩*/

#loading {

height: 100%;

left: 0px;

position: fixed;

_position:absolute; 

top: 0px;

width: 100%;

filter:alpha(opacity=50);

-moz-opacity:0.5;

opacity : 0.5;

}

.loading {

background-color: white;

z-index: 199;

}

#loading_img{

position:absolute; 

top:50%;

left:50%;

height:35px;

margin-top:-75px; // 이미지크기

margin-left:-75px; // 이미지크기

z-index: 200;

}

</style>

 2) Script

$(document).ready(function(){

var loading = $('<div id="loading" class="loading"></div><img id="loading_img" alt="loading" src="/images/viewLoading.gif" />')

.appendTo(document.body).hide();

$(window)

.ajaxStart(function(){

loading.show();

})

.ajaxStop(function(){

loading.hide();

});

});

 3) 사진

  

  4)