자바스크립트 로딩화면 - jabaseukeulibteu lodinghwamyeon

Javascript로 로딩중 표시를 하기 위한 함수는 다양한 방법으로 만들 수 있습니다.

그 중에서 제가 생각하기에 굉장히 괜찮은 함수를 소개해보려고 합니다.

function LoadingWithMask() {
	//화면의 높이와 너비를 구합니다.
	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 += "<div id='loadingImg'>";
	loadingImg += " <img src='LoadingImg.gif' style='position: relative; display: block; margin: 0px auto;'/>";
	loadingImg += "</div>";  
 
	//화면에 레이어 추가
	$('body')
		.append(mask)
		.append(loadingImg)
	   
	//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채웁니다.
	$('#mask').css({
			'width' : maskWidth
			, 'height': maskHeight
			, 'opacity' : '0.3'
	}); 
 
	//마스크 표시
	$('#mask').show();   
 
	//로딩중 이미지 표시
	$('#loadingImg').show();
}

이 함수를 실행하게 되면 여러분이 저장해둔 LoadingImg.gif 파일을 로딩하여 보여줍니다.

로딩중인 표시를 제거해야할 경우에는 다음과 같은 함수를 실행시키면 됩니다.

function closeLoadingWithMask() {
	$('#mask, #loadingImg').hide();
	$('#mask, #loadingImg').remove();  
}

이 함수를 사용하는 예제와 예제 소스를 보시도록 하겠습니다.

먼저 전체 예제 소스를 먼저 살펴보도록 합시다.

아래의 소스는 예제를 설명하기 위해 조금 각색했습니다.

<script>
function test(imageName) {
	LoadingWithMask('your site\'s image path');
	setTimeout("closeLoadingWithMask()", 3000);
}

function LoadingWithMask(gif) {
	//화면의 높이와 너비를 구합니다.
	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='"+ gif + "' 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();  
}

스피너(Pacman)

자바스크립트 로딩화면 - jabaseukeulibteu lodinghwamyeon

팩맨(Pacman)

자바스크립트 로딩화면 - jabaseukeulibteu lodinghwamyeon

위지스(Wedges)

자바스크립트 로딩화면 - jabaseukeulibteu lodinghwamyeon

해당 이미지들은 아래의 사이트에서 얻을 수 있었습니다.

Loading.io 링크

안녕하세요. 오늘은 프로젝트에서 로딩시에 화면을 나타내는 로딩 페이지를 이야기해보겠습니다.

스크립트 함수나 AJAX 사용 시, 로딩시간이 있는 경우, 사용자 입장에서 화면이 움직이지 않을 경우 문제가 있다고 생각할 수도 있기 때문에 코드가 도는동안 화면에 로딩이라는 표시를 해줘야합니다.

제가 만든 프로젝트를 예를 들어보겠습니다.

(2021년 8월 25일 하단에 LoadingOverlay plugin 사용방법을 추가하였습니다.)


박스안에 정보를 클릭을하면 함수가 돌아가는데 정보량이 많다보니 시간이 좀 걸립니다..

그래서 아래와 같은 로딩창이 필요한 이유입니다.

자바스크립트 로딩화면 - jabaseukeulibteu lodinghwamyeon

크게 로딩실행함수와 종료함수 두가지로 나뉩니다.

로딩실행함수

해석하자면

문서의 높이와 바디부분의 넓이를 변수에 담습니다.

그리고 mask에 로딩창의 검은색 배경화면을 설정하여 display:none처리로 숨겨줍니다.

loadingImg 변수에는 스피너파일(로딩파일) 을 담아줍니다. (img에 경로에 맞게 설정하시면 되요~)

해당 스피너 파일 (다른이름으로 저장하신다음 사용하시면 됩니다.)

자바스크립트 로딩화면 - jabaseukeulibteu lodinghwamyeon

바디부분에 mask 변수를 추가하합니다.

mask을 처음 선언했던 높이와 넓이를 적용해줍니다.

그리고 mask를 보여주고

원하는 부분뒤에 로딩창 div를 append로 추가한 다음 show를 통해 보여주면 나타나게 됩니다.

function Loading() {
    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 +=" <div id='loadingImg'>";
    loadingImg +=" <img src='${pageContext.request.contextPath}/img/Spinner2.gif' style='position:absolute; z-index:9500; text-align:center; display:block; margin-top:300px; margin-left:750px;'/>";
    loadingImg += "</div>";  
 
    $('body')
        .append(mask)
 
    $('#mask').css({
            'width' : maskWidth,
            'height': maskHeight,
            'opacity' :'0.3'
    });
    
    $('#mask').show();
  
    $('.loadingImg').append(loadingImg);
    $('#loadingImg').show();
}

저같은 경우 원하는 부분을 map에 class명 loadingImg을 붙여서 사용했습니다.

<div id="map" class="loadingImg"></div>

로딩창 닫는 부분

로딩창 닫는 부분은 간단하게 mask와 loadingImg의 id값으로 설정된 div를 hide으로 숨겨주면됩니다.

저는 확실히하기 위해 remove를 한번 더 선언해서 지워줬습니다.

function closeLoading() {
  $('#mask, #loadingImg').hide();
  $('#mask, #loadingImg').remove(); 
}

그리고 함수가 자동으로 시작되는 부분에서

아래와 같이 테스트를 하면 로딩창이 뜨고 settimeout함수로 인해 3초뒤에 닫히는 걸 확인한 수 있습니다.

$(function() {

Loading();	
setTimeout("closeLoading()", 3000);

});

LoadingOverlay 사용방법

작업을 하다가 LoadingOverlay 플로그인을 알게 되어 공유드리고자 합니다.

위에 방법보다 훨씬 간편하더군요..수정하면서 윗글을 보니 고생이 많았구나 생각이 드네요...ㅎㅎ

우선 LoadingOverlay를 사용하기 위해선 두가지가 필요합니다. 

1. LoadingOverlay의 js 파일

2. 스피너 파일을 나타낼 bootstrap의 icons의 css 파일

loadingoverlay.min.js

0.01MB

icons.css

0.04MB

 해더부분에 경로에 맞게 스크립트를 선언해줍니다.

그리고 전 confirm 메세지 후에 LoadingOverlay를 나타나게 아래 코드를 붙여줬습니다.

그럼 끝입니다...

<!DOCTYPE html>
<html lang="ko">
<head>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/bootstrap-dist/css/icons.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/loadingoverlay.min.js"></script>

<script type="text/javascript">

if(!confirm("등록하시겠습니까?")){
		return false;
} 
	
$.LoadingOverlay("show", {
	background       : "rgba(0, 0, 0, 0.5)",
	image            : "",
	maxSize          : 60,
	fontawesome      : "fa fa-spinner fa-pulse fa-fw",
	fontawesomeColor : "#FFFFFF",
});

</script>
 
</head>

그리고 ajax를 사용하여 안보이고 싶을 경우, 아래와 같이 hidn처리를 해주면 됩니다.

$.LoadingOverlay("hide");

잘 나옵니다... 플로그인 참 간편하네요 하하하핳ㅎ핳ㅎ하핳...

자바스크립트 로딩화면 - jabaseukeulibteu lodinghwamyeon