Javascript 로딩 화면 - Javascript loding hwamyeon

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 링크

로딩 창 키는 함수

jQuery를 이용해 마스크와 로딩 이미지 삽입.

// 로딩창 키는 함수
function openLoading() {
    //화면 높이와 너비를 구합니다.
    let maskHeight = $(document).height();
    let maskWidth = window.document.body.clientWidth;
    //출력할 마스크를 설정해준다.
    let mask ="<div id='mask' style='position:absolute; z-index:9000; background-color:#000000; display:none; left:0; top:0;'></div>";
    // 로딩 이미지 주소 및 옵션
    let loadingImg ='';
    loadingImg += "<div id='loadingImg' style='position:absolute; top: calc(50% - (200px / 2)); width:100%; z-index:99999999;'>";
    loadingImg += " <img src='https://loadingapng.com/animation.php?image=4&fore_color=000000&back_color=FFFFFF&size=128x128&transparency=1&image_type=0&uncacher=75.5975991029623' 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();
}

로딩 창 끄는 함수

jQuery를 이용해 마스크, 로딩 이미지 제거.

// 로딩창 끄는 함수
function closeLoading() {
    $('#mask, #loadingImg').hide();
    $('#mask, #loadingImg').empty(); 
}

예제

실제 사용은 로딩 창 열기 - 작업 할 프로세스 실행 - 완료 - 로딩 창 닫기.

예제는 간단히 하기 위해 setTimeout 사용.

See the Pen loading process by Kim Jae Ik (@doitdoik) on CodePen.

안녕하세요

블로그에서 글을 읽을 때 이미지가 많은 경우 이미지가 출력이 되지 않은 상태로 계속해서 글들을 확인할 수 있습니다

그러면 블로그에 쓴 글이 전부 불러왔는지 알 수가 없는데요

이번 포스팅에서는 글이 실행될 때 글과 이미지가 전부 실행이 되는 동안 로딩화면을 만드는 방법에 대해서 알아보겠습니다!

이미지 다운로드

먼저 로딩이미지를 받아야합니다

가지고 있는 이미지가 있다면 그 로딩이미지를 쓰면되지만 로딩이미지가 따로 없다면 아래의 링크에서 다운받으면 됩니다

로딩 이미지만 전문으로 다운 받는 사이트입니다

icons8.com/

Free Icons, Clipart Illustrations, Photos, and Music

Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made by designers → consistent quality ⚡️

icons8.com

사이트에 들어가서 밑으로 내리면 이미지들이 보입니다

맘에 드는 이미지를 선택하고 "Download"버튼을 누르면 이미지가 다운로드됩니다

로딩창 구현 방법

다운받은 이미지를 바탕으로 로딩창 구현하는 방법에 대해서 알아보겠습니다!

로딩창을 구현하기 위해서는 블로그의 HTML을 편집해야합니다

블로그 관리자의 "꾸미기"탭의 "스킨 편집"메뉴로 이동합니다

스킨 편집의 오른쪽 상단의 "html 편집"버튼을 눌러 html 편집으로 이동합니다

1. "추가"버튼을 클릭하면 이미지를 블로그에 업로드할 수 있습니다

 -> 다운받은 이미지를 선택하여 블로그에 로딩바 이미지를 업로드합니다

2. 이미지 업로드가 완료되면 "적용"버튼을 눌러 로딩바 이미지 업로드를 완료합니다

1. <body> </body> 사이에 로딩 화면 코드를 복사해넣습니다

로딩창 코드는 이미지 아래를 참고바랍니다

2. "적용"버튼을 눌러 로딩창 적용을 완료합니다

로딩창 화면 코드 입니다!

이걸 복사해주시면 됩니다

<!-- Loading 화면 코드 시작 -->

<script src="https://code.jquery.com/jquery-1.8.0.js"
  integrity="sha256-00Fh8tkPAe+EmVaHFpD+HovxWk7b97qwqVi7nLvjdgs="
  crossorigin="anonymous"></script>
<script type="text/javascript">
 $(window).on('load', function () {
      $("#load").hide();
 });
</script>
<style type="text/css">
#load {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	display: block;
	opacity: 0.8;
	background: white;
	z-index: 99;
	text-align: center;
}

#load > img {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 100;
}
</style>
<div id="load">
	<img src="./images/loading.gif" alt="loading">
</div>
<!-- Loading 화면 코드 종료-->

이제 정상적으로 로딩창이 뜨는지 테스트만 하면 완료입니다!!

정상적으로 적용이 됐으면 아래처럼 로딩창이 뜨는 것을 확인할 수 있습니다

여기까지 티스토리 블로그의 로딩창을 구현하는 방법에 대해서 알아봤습니다!