Javascript - Loading bar 구현

 ajax로 데이터를 불러올 때나 페이지를 이동할 때 아무것도 뜨지 않으면 사용자들은 이게 진행되고 있는지 아닌지를 판별할 수가 없습니다. 그렇게 되다보면 마음의 여유가 없어지고 무한정 클릭해서 렉이 발생되기도 합니다. 따라서, 사용자들에게 마음의 여유를 주기 위해 기다리는 동안 이 프로세스가 잘 실행되고 있음을 시각적으로 보여줄 필요가 있습니다. 이럴 때 필요한게 바로 Loading bar입니다. 로딩바 혹은 대기창이라고 합니다. 준비물은 JQuery입니다. JQuery가 있어야만 .ajaxStart와 .ajaxStop을 쓸 수 있습니다. 일단 소스부터 보여드리도록 하겠습니다.

<div id="loadingBar" style="display:none;">
    <img src="/images/loadingBar.gif"/>
</div>
 
<script type="text/javascript">
 
    $(function(){
        
        $(document).ajaxStart(function(){
            $("#loadingBar").show(); //미리 만들어둔 loadingBar
        }).ajaxStop(function(){
            $("#loadingBar").hide();            
        });
        
        $("a").click(function(){
            if (this.href != null && this.target != "_blank") {
                $("#loadingBar").show(); //미리 만들어둔 loadingBar                
            }
        });
    });
 
</script>

 일단 소스는 위와 같습니다. .ajaxStart일 때 미리 만들어둔 Loading bar를 보여주고 ajaxStop일 때는 다시 Loading bar를 숨기는 방식입니다. Loading bar는 구글신에게 검색해보면 무수히 나오니 그 중 적절한 gif 파일을 찾아 사용하면 되겠습니다.

 

 그 밑의 방식은 제가 저번 프로젝트를 하면서 사용한 약간 꼼수식의 방식입니다. 페이지를 이동할 때도 느린 경우가 종종 발생했는데 그렇게 될 때는 Loading bar를 보여줄 수 있는 수단이 없었습니다. 그래서 임의로 위와 같이 만들어주었습니다. 해당 프로젝트를 할 때 링크를 가는 방식이 모두 <a>태그로 되어 있어서 <a>태그일 때 페이지를 이동하면 Loading bar가 나타나도록 해주었습니다. 단, 이동할 때 페이지가 지정이 안되있다거나 target이 "_blank", 즉 새창일 때는 하지 않았습니다. 새창을 열 때도 지정해두면 남은 페이지에 계속 Loading bar가 남기 때문입니다. 이 외에 응용으로 href에 맨 끝의 주소(예를 들면 .do나 .action일 때) 예외 처리를 해두면 더 완성도 높은 Loading bar를 만들 수 있겠습니다.