드럼치는 프로그래머
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) 사진
[출처] //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 : //malsup.com/jquery/block/
다운받은 파일을 압축을 풀어줍니다.
jquery.blockUI.js 파일을 프로젝트 내 폴더로 옮겨주시고
사용할 페이지에서 아래와 같이 import 해줍니다.
<script type="text/javascript" src="<c:url value='/resource/js/aljjabaegi/jquery.blockUI.js'/>"></script> | cs |
그리고 원하는 로딩바의 이미지를 구글링을 통해 다운로드 한 후 프로젝트 내에 옮겨주세요.
이제 다운받은 gif 파일을 표출되게끔 해주어야 하는데요,
$.blockUI.defaults = { // message displayed when blocking (use null for no message) message: '<image src="../resource/js/aljjabaegi/images/142.gif"/>', | cs |
위와 같이 $blockUI.defaults 를 검색해서 message 부분을 다운받은 gif 파일의 경로로 수정해줍니다.
이제 로딩바를 표출할 페이지로 이동해 아래와 같이 스크립트를 추가합니다.
주의)
ajax 의 async 옵션이 false 로 되어 있는 경우에는 표출이 되지 않으니 async옵션을 준 경우에는 true 로 수정합니다.
(default 설정은 true)
이제 해당 페이지에서는 ajax 가 실행될때 위와같은 이미지가 표출되고, 종료되면 사라지게 됩니다.