JavaScript - 페이지 전체 로딩 표시 띄우기

JavaScript - 페이지 전체 로딩 표시 띄우기

 

JavaScript와 JQuery를 이용하여 쉽게 표시가 가능하다.

먼저 전체 스크립트 소스는 다음과 같다.

<script>
function loading() {
    const path = 'path를 입력해주세요.';
    LoadingWithMask(path);
    setTimeout("closeLoadingWithMask()", 3000);
}
 
function LoadingWithMask(path) {
    var maskHeight = $(document).height();
    var maskWidth  = window.document.body.clientWidth;

    var mask       ="<div id='mask' style='position:absolute; z-index:9000; background-color:#000000; display:none; left:0; top:0;'></div>";
    var loadingImg ='';
      
    loadingImg +=" <img src='"+ path +"' style='position: absolute; display: block; margin: 0px auto;'/>";
 

    $('body').append(mask);
    $('#mask').css({
            'width' : maskWidth,
            'height': maskHeight,
            'opacity' :'0.3'
    });
    $('#mask').show();
    $('#loadingImg').append(loadingImg);
    $('#loadingImg').show();
}
 
function closeLoadingWithMask() {
    $('#mask, #loadingImg').hide();
    $('#mask, #loadingImg').empty(); 
}
</script>

사용방법

다음과 같이 3개의 함수를 선언해주고 html에 id가 mask인 div를 하나 만들어준다.

그리고 원하는 타이밍에 loading 함수를 호출해주면 loading에 path에 맞는 gif 이미지가 뜨는 방식이다.

위에 예제로는 setTimeout 함수를 사용하여 3초가 동작하다가 closeLoadingWithMask 함수를 호출하여 종료하는 방식이다. 이렇게 원하는 시간 뒤에 종료할때는 setTimeout 함수를 사용하면 되고 따로 종료 시점이 필요한 경우에는 그 시점에 해당하는 함수 안에 closeLoadingWithMask 를 호출하여 종료하면 된다.

 

gif 파일 다운

로딩시 보여줄 움직이는 이미지가 필요하므로 아래 사이트에 가입하여 원하는 디자인을 고르고 색상이나 크기 등을 편집하여 다운을 받을 수 있다.

https://loading.io/

추가사항

위에 사항을 잘 따라하면 git 이미지가 잘 뜨지만 위치를 따로 설정해두지 않아 원하는 위치에 뜨지 않을 것이다. 보통은 브라우저창 정가운데 띄우기 때문에 position을 활용하여 설정이 가능하다. 방법은 아래 글을 참고하여 설정하면 된다.

https://sjparkk-dev1og.tistory.com/61?category=1012094 

CSS - position : absolute 를 이용한 div 위치 지정