[Javascript] 자바스크립트로 로딩중 화면 만들기(로딩 표시)

로딩중 표시 함수

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)

팩맨(Pacman)

위지스(Wedges)

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

Loading.io 링크