[Jquery] ajax를 이용한 비동기 통신 시 로딩바 구현

최초 초기화 시에 .ajaxStart(), .ajaxStop() 이벤트 등록만으로 구현이 가능하다.

로딩바 이미지는 첨부파일 참고

아래와 같이 div태그를 하나 만들어서 이미지를 등록해두고,

<div id="viewLoading">
 <img src="/img/viewLoading.gif" />
</div>

아래와 같이 스타일 태그를 지정해서 가운데서 돌아가도록 만들어둔다.

<style type="text/css">
div#viewLoading {
        text-align: center;
        padding-top: 70px;
        background: #FFFFF0;
        filter: alpha(opacity=60);
        opacity: alpha*0.6;
}
</style>

이제 로딩바가 항상 돌아가는 상황이 만들어졌고,

최초 진입 시에는 돌아가면 안되기 때문에 hide를 해주고, 위에서 언급한 .ajaxStart(), .ajaxStop() 이벤트를 등록해보자.

<script>
$(document).ready(function() {    // 최초 진입 시 로딩바 div를 hide시킨다.
 $('#viewLoading').hide();
})
.ajaxStart(function() {         // ajax 통신 시작 callback (로딩바 show)
 console.log('start');
      $('#viewLoading').show();
})
.ajaxStop(function() {        // ajax 통신 완료 callback (로딩바 hide)
 console.log('end');      
       $('#viewLoading').hide();
}); 
</script>

이제 $.ajax() 함수를 호출할때마다 로딩바가 돌아가는 것을 볼 수 있다.

IE, Chrome에서 테스트 결과 문제없음.

오랫만에, front-end를 접해보니 하루종일 삽질함;;