Jquery 로딩바 - Jquery lodingba

드럼치는 프로그래머

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) 사진

[출처] http://derveljunit.tistory.com/227

최초 초기화 시에 .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를 접해보니 하루종일 삽질함;;

jquery ajax loading bar, ajax 로딩바 나타내기 blockUI 적용방법

ajax 통신 시 시간이 로딩바를 표출하는 방법을 알아보겠습니다.

ajax 로딩바를 구현하기 위해선 blockUI 라는 플러그인이 필요합니다.

아래의 Link에서 다운로드 하세요.

LInk : http://malsup.com/jquery/block/

다운받은 파일을 압축을 풀어줍니다.

jquery.blockUI.js 파일을 프로젝트 내 폴더로 옮겨주시고

사용할 페이지에서 아래와 같이 import 해줍니다.

그리고 원하는 로딩바의 이미지를 구글링을 통해 다운로드 한 후 프로젝트 내에 옮겨주세요.

이제 다운받은 gif 파일을 표출되게끔 해주어야 하는데요,

위와 같이 $blockUI.defaults 를 검색해서 message 부분을 다운받은 gif 파일의 경로로 수정해줍니다.

이제 로딩바를 표출할 페이지로 이동해 아래와 같이 스크립트를 추가합니다.

주의)

ajax 의 async 옵션이 false 로 되어 있는 경우에는 표출이 되지 않으니 async옵션을 준 경우에는 true 로 수정합니다.

(default 설정은 true)

이제 해당 페이지에서는 ajax 가 실행될때 위와같은 이미지가 표출되고, 종료되면 사라지게 됩니다.