JavaScript 로딩바 간단하게 구현

JavaScript 로딩바 간단하게 구현

간단한 로딩바 하지만 로딩바를 웹 페이지에 막상 만들자니 귀찮고 AJAX 사용이 많은 요즘 화면에서

AJAX 를 이용하여 기존 만들어 쓰던 로딩바의 불편함을 느끼게 되어 간단하게나마 로딩바를 구현해

보았습니다.

JavaScript

var lodBarCtl = {

    id        : "loddingBarDiv"

    ,cnt    : 0

    ,init    : function(id, cnt) {

        lodBarCtl.id = id;

        lodBarCtl.cnt = cnt;

    }

    ,openAdd    : function() {

        lodBarCtl.cnt++;

        $("#"+lodBarCtl.id).show();

    }

    ,open    : function(cnt) {

        if(arguments.length>0) {

            lodBarCtl.cnt = arguments[0];

        }

        $("#"+lodBarCtl.id).show();

    }

    ,close    : function() {

        lodBarCtl.cnt--;

        if(lodBarCtl.cnt<=0) {

            $("#"+lodBarCtl.id).hide();

        }

    }

};

페이지 하단에 삽입

페이지 하단에 삽입시 기본적으로 레이어의 위치가 상당에 있게 되므로 페이지 하단에 위치 시키며 경우에 따라서 z-Index 값을 높게 책정하여 다른 레이어보다 위에 위치하도록 해줍니다.

<div id='loddingBarDiv' style='display:none; position:absolute; top:0px; left:0px; width:100%; height:100%; padding-top:550px; z-Index:9999;'><img src='${pageContext.request.contextPath}/resources/images/load-indicator.gif' border='0' /></div>

호출  예제

단일 Ajax 호출시

lodBarCtl.open();

ajax..... ajaxCallBack 함수 <---- ajax 호출

function ajaxCallBack(ajaxCallBack ) {

    lodBarCtl.close();

}

여러건의 Ajax 호출시

var urlLt = ['selectTotalVisitCntList','selectPureVisitCntList','selectActiveUserCntList'];

lodBarCtl.open(urlLt.length);

for(var i in urlLt) [ ajax....urlLt[i]  ajaxCallBack 함수 ] <---- ajax 호출

function ajaxCallBack(ajaxCallBack ) {

    lodBarCtl.close();

}

실행 시간이 일정치 않은 여러건의 Ajax 호출시

openAdd 함수를 이용하는 경우 lodBarCtl.cnt 값을 1씩 증가시켜 close 시점을 변환 하게 됩니다.

이전 Ajax 가 종료된 시점이 아니라면 로딩바가 유지되며 이전 Ajax 가 종료된 시점인 경우 로딩바가

종료되어 로딩바 종료 시점을 동적으로 조정 할수 있게 됩니다.

임의의 시점 호출

lodBarCtl.openAdd();

ajax..... ajaxCallBack 함수 <---- ajax 호출

function ajaxCallBack(ajaxCallBack ) {

    lodBarCtl.close();

}

임의의 시점 호출

lodBarCtl.openAdd();

ajax..... ajaxCallBack 함수 <---- ajax 호출

function ajaxCallBack(ajaxCallBack ) {

    lodBarCtl.close();

}