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

 

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

 

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

 

 

 

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

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

 

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

 

 

 

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

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

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

 

<script type="text/javascript" src="<c:url value='/resource/js/aljjabaegi/jquery.blockUI.js'/>"></script>

 

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

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

 

        $.blockUI.defaults = {
            // message displayed when blocking (use null for no message)
            message:  '<image src="../resource/js/aljjabaegi/images/142.gif"/>',

 

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

 

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

 

<script>
    $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
</script>

 

주의)

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

(default 설정은 true)

 

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