[Javascript] 로딩바 구현

이전 포스팅한 로딩바 구현은 어떤 클릭 이벤트가 일어났을 때, 넘어가기전까지 레이어를 보여주는 방식이었더라면

이번 로딩바는 페이지를 로드하는 처음 시점에서 레이어를 보여주고 리소스가 모두 로드되었을 때 레이어를 가려주는 방법이다. 이전 포스팅 내용은 맨 아래 링크로 남겨두었다.

실행되는 페이지에 아래 코드를 넣어준다.

<script type="text/javascript" src="../includes/jquery.js"/>
<script type="text/javascript">
    (function() { loading_ta(1); })();
    $(window).load(function(){ loading_ta(0); });
</script>

아래 코드는 각 페이지에 넣어도되고 js파일로 만들어 포함시켜도 된다.

function loading_ta(view) {
    if(view) {
        var loading_left = '50%', loading_top = '50%'; // 적용이 안되는 상황을 고려해 기본 값 설정 
        if (typeof (window.innerWidth) == 'number') { //Chrome
            loading_left = window.innerWidth / 2;
            loading_top = window.innerHeight / 2;
        } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            loading_left = document.documentElement.clientWidth / 2;
            loading_top = document.documentElement.clientHeight / 2;
        } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { //IE9
            loading_left = document.body.clientWidth / 2;
            loading_top = document.body.clientHeight / 2;
        }
        var lo_div = "<div name='lo_div' id='lo_div' style='position:absolute; height:100%; width:100%; top:0; left:0; background:#000000; opacity:0.0; filter:alpha(opacity=00); z-index:9995;'></div><div name='lo_div' id='lo_div' style='position:absolute; height:70; width:200; top:"+loading_top+"; left:"+loading_left+"; margin-left:-100px; margin-top:-35px;  background:#ffffff; opacity:0.8; filter:alpha(opacity=80); z-index:9996;'></div><div name='lo_div' id='lo_div' style='position:absolute; height:70; width:200; top:"+loading_top+"; left:"+loading_left+"; margin-left:-100px; margin-top:-35px; text-align:center; z-index:9998;'><p style='height:30; width:200; margin:15px 0px 15px 0px; font-weight:bold;'>데이터 처리 중입니다.<br>잠시 기다려주십시오.</p></div>";
        document.write(lo_div);
    } else if(!view) {
        var lo_ta = document.getElementsByName("lo_div");
        lo_ta[0].style.display="none";
        lo_ta[1].style.display="none";
        lo_ta[2].style.display="none";
    }
}

2013/08/02 - [대학 정리노트/JavaScript] - [Javascript] 로딩중 레이어 만들고 띄우기