Ajax 통신 중 Loading bar 구현 (ajaxStart, ajaxStop 이벤트)

 

1. // loading bar 태그
2. // iframe 위에 로딩 바 이미지를 얹혀 띄우는 방식
4. <!-- Progress Bar -->
5. <div id="hiddenDivLoading" style="visibility:hidden">
6.     <iframe id="iframeLoading" frameborder="0" height="134px" style="z-index:-1; position:absolute; visibility:hidden"></iframe>
7.     <div id='load'><img src='/img/common/loading.gif' /></div>                                                                                                                  
8. </div>
9. <!-- Progress Bar -->
10.  
11.  
12.  
13. // document onload function !!
14. $(document).ready(function(){
15.    
16.     // 페에지 로딩 즉시 로딩바 태그 활성화
17.     var divLoading = document.all.hiddenDivLoading;
18.         divLoading.style.visibility = "visible";
19.  
20.     // ajax 통신 중 로딩 바
21.     // 현재 페이지에서 ajax 통신이 시작될 경우 실행될 이벤트
22.     $(document).ajaxStart(function() {
23.         // 로딩 바 이미지를 띄우고
24.         $('#load').show();
25.         // 화면의 중앙에 위치하도록 top, left 조정 (화면에 따라 조정 필요)
26.         $("#hiddenDivLoading").show().css({
27.             top: $(document).scrollTop()+ ($(window).height() )/2.6 + 'px',
28.             left: ($(window).width() )/2.6 + 'px'
29.         });
30.     // ajax 통신이 종료되었을 때 실행될 이벤트
31.     }).ajaxStop(function() {
32.         // 로딩 바 태그와 이미지를 모두 hide 처리
33.         $('#load').hide();
34.         $("#hiddenDivLoading").hide();
35.     });
36.  
37. });