본문 바로가기

티스토리 광고 나오면 사라지는 로딩화면(loading)

by JINYH 2022. 1. 25.
728x90
반응형

웹사이트 접속 시 개체(텍스트, 이미지, 동영상, 광고 등)가 버벅거리듯이 딜레이 로딩될 때가 있는데, 이는 간혹 웹사이트 방문자에게 '신뢰할 수 없는 사이트'로 보일 수 있다.

 

최악의 경우 웹사이트를 이탈하는 등의 상황을 야기시키기도 한다.

 

 

 

다른 건 차치하더라도 만약 딜레이 로딩되는 개체가 구글 애드센스(Adsense) 광고라면, 광고가 보이기도 전에 광고면을 벗어날 수도 있기 때문에 수익형 티스토리 블로그를 운영하는 입장에서는 꼭 해결해야 할 문제다.

 

그런데 아쉽게도 모든 개체를 동시에 로딩되게 하거나 개체들의 로딩을 각각 컨트롤하는 것은 불가능하다. 그래도 이를 해소하기 위한 방편으로 웹사이트 접속 시 화면 상 강제적인 효과를 적용해서 웹사이트 방문자에게 '로딩이 완료된 상태의 사이트'를 보여줄 수는 있다.

 

 

 

본 글은 웹사이트 접속 시의 화면 상 효과들(페이드인 - pade in / 로딩바 - loading bar / 로딩 화면 - loading screen)과 함께 구글 애드센스(Adsense) 광고가 나오면 사라지는 로딩 화면을 생성하는 방법에 대한 내용이다.

 

이 효과들은 초 단위에 불과하지만 설정한 시간에 따른 강제성이 있기 때문에, 애초에 로딩 속도가 빠른 웹사이트는 결과적으로 오히려 로딩 완료가 지연될 수도 있으니 자신의 상황에 맞는 효과를 적용하기 바란다.

 

 

 

 

 

 

 

 

 

 

1] 페이드인 (Pade In)

 

01-페이지-페이드인

 

 

페이드인(pade in) 효과를 적용하면 화면 자체가 부드럽게 로딩되기 때문에, 일부 개체가 딜레이 로딩되더라도 웹사이트 방문자가 느낄 수 있는 불안 요소를 최소화할 수 있다.

 

또한 미미할 수도 있지만 웹사이트 방문자의 눈을 편안하게 해 주며 콘텐츠에 집중할 수 있도록 분위기를 환기시켜 주는 기능도 있다.

 

참고로 로딩 중에 스크롤링, 클릭, 터치 모두 가능하다.

 

 

 

 

 

1-1] CSS 작업

아래 코드만 CSS에 삽입하면 된다. 3s는 '3초(3 second)'를 의미하니 기호에 맞게 수정하기 바란다.

 

body {
	animation: fadein 3s;
	-moz-animation: fadein 3s; /* Firefox */
	-webkit-animation: fadein 3s; /* Safari and Chrome */
	-o-animation: fadein 3s; /* Opera */
}
@keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-moz-keyframes fadein { /* Firefox */
	from { opacity: 0; }
	to { opacity: 1; }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
	from { opacity: 0; }
	to { opacity: 1; }
}
@-o-keyframes fadein { /* Opera */
	from { opacity: 0; }
	to { opacity: 1; }
}

 

 

 

 

 

2] 로딩바 (Loading Bar)

 

02-로딩바

 

 

로딩바(loading bar)는 앞서 소개한 페이드인(pade in)과 같이 부드럽게 로딩되는데, 화면 자체가 부드럽게 로딩되는 것은 아니다.

 

실제 화면 위에 흰색 배경(white background)의 박스가 있고, 이 박스가 사라지면서 실제 화면이 나타나는 것이다.

 

화면 상단에는 박스가 사라지는 시간에 맞춰서 나타나고 사라지는 막대(bar)가 있기 때문에 로딩이 완료됐다는 것을 시각적으로 확인 가능하다.

 

참고로 로딩 중에 스크롤링은 가능하나 클릭 및 터치는 불가하다.

 

 

 

 

 

2-1] HTML 작업 - <body> 아래

아래 코드를 HTML의 <body> 아래에 삽입한다. 코드 중 'style' 부분은 CSS에 삽입 가능하다.

 

 

 

[ 27 ]

2s는 '2초(2 second)'를 의미하며 변경 가능하다.

 

[ 34 ]

2000ms는 '2초(2000 millisecond)'를 의미하며 변경 가능하다.

 

cubic-bezier는 막대(bar)가 나타나는 시간을 의미하며 변경 가능하다. 쉽게 설명하자면 '(1, 0, 0, 1)'는 막대(bar)를 4 등분한 것과 같고, '1'은 느리게 나타나게 하고 '0'은 빠르게 나타나게 한다. (상기 예시 이미지 참고 / '0.0'과 '1.0' 사이에 있는 소수점 적용도 가능)

 

<body>


<!-- 로딩바 시작 -->
<div id="loadingIndicator" class="preloader">
	<div id="loadingBar" class="loading-bar"></div>
	</div>

<script>
	document.addEventListener("DOMContentLoaded", function() {
		requestAnimationFrame(function() {
			document.getElementById("loadingBar").style.width = "100%";
		});
	});
	</script>

<style>
	.preloader {
		display: inline;
		z-index: 9999;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: white;
		transition: opacity 2s ease;
	}
	.loading-bar {
		width: 0%;
		height: 5px;
		background-color: blue;
		border-radius: 0px 10px 10px 0px;
		transition: width 2000ms cubic-bezier(1, 0, 0, 1);
	}
	</style>
<!-- 로딩바 끝 -->


<s_t3>

03-로딩바-html

 

 

 

 

 

2-2] HTML 작업 - </body> 위

아래 코드를 HTML의 </body> 위에 삽입한다.

 

[ 7 ]

2000은 '2초'를 의미하며 변경 가능하다.

 

<!-- 로딩바 시작 -->
<script>
	window.onload = function () {
		document.getElementById("loadingIndicator").style.opacity = "0";
		setTimeout(function() {
			document.getElementById("loadingIndicator").style.display = "none";
		}, 2000);
	}
	</script>
<!-- 로딩바 끝 -->


</body>

 

 

 

 

 

3] 로딩 화면 (Loading Screen)

 

로딩 화면(loading screen)은 앞서 소개해 드린 로딩바(loading bar)와 같이 박스가 사라지면서 실제 화면이 나타난다.

 

막대(bar)가 없기 때문에 로딩이 완료됐다는 것을 시각적으로 바로 확인할 수는 없으나, GIF 이미지를 활용한 시각적 표현으로 로딩 시 웹사이트 방문자의 지루함을 해소시키고 웹사이트를 브랜딩 할 수도 있다.

 

 

 

그렇기 때문에 먼저 로딩 화면(loading screen)에 사용할 GIF 이미지가 필요하다.

 

GIF 이미지는 아래 사이트에서 다운로드할 수 있으나, 개인적으로는 구글에서 'loading, gif, filetype:gif' 또는 'circle, gif, filetype:gif'로 검색해서 구하는 것을 추천한다. (아래 첨부 파일 - gif img sample.zip - 참고)

 

https://icons8.com/
https://loading.io/

gif img sample.zip
17.22MB

 

 

GIF 이미지의 배경 색상 및 사이즈(가로 X 세로)에 따라 'style' 코드가 달라져야 하는데, 아래의 3가지 예시를 보면 이해하기 쉽다.

 

참고로 로딩 중에 스크롤링은 가능하나 클릭 및 터치는 불가하다.

 

 

 

 

 

3-1] 예시 1 / HTML 작업 - <body> 아래

04-로딩-화면-1

<body>


<!-- 로딩화면 시작 -->
<div id="loading">
	<img src="./images/loading.gif" alt="loading-img">
	</div>

<script type="text/javascript">
	$(window).on('load', function() {
		setTimeout(function() {
			$("#loading").fadeOut();
		}, 2000);
	});
	</script>

<style type="text/css">
	#loading {
		position: fixed;
		top: 0px;
		width: 100%;
		height: auto;
		z-index: 10000;
		background: white;
		opacity: 0.9;
		display: flex;
		justify-content: center;
	}
	#loading > img {
		width: 100%;
		height: auto;
	}
	@media screen and (max-width: 800px) {
		#loading {
			position: fixed;
			top: 0px;
			height: 100%;
			z-index: 10000;
			background: white;
			opacity: 0.9;
			display: flex;
			justify-content: center;
		}
		#loading > img {
			width: auto;
			height: 60%;
		}
	}
	</style>
<!-- 로딩화면 끝 -->

<s_t3>

 

 

 

 

 

3-2] 예시 2 / HTML 작업 - <body> 아래

05-로딩-화면-2

<body>


<!-- 로딩화면 시작 -->
<div id="loading">
	<img src="./images/loading.gif" alt="loading-img">
	</div>

<script type="text/javascript">
	$(window).on('load', function() {
		setTimeout(function() {
			$("#loading").fadeOut();
		}, 2000);
	});
	</script>

<style type="text/css">
	#loading {
		position: fixed;
		top: 0px;
		width: 100%;
		height: 100%;
		z-index: 10000;
		background: #170C34;
		opacity: 0.9;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#loading > img {
		width: 40%;
		height: auto;
	}
	@media screen and (max-width: 800px) {
		#loading > img {
			width: 70%;
			height: auto;
		}
	}
	</style>
<!-- 로딩화면 끝 -->


<s_t3>

 

 

 

 

 

3-3] 예시 3 / HTML 작업 - <body> 아래

06-로딩-화면-3

<body>


<!-- 로딩화면 시작 -->
<div id="loading">
	<img src="./images/loading10.gif" alt="loading-img">
	</div>

<script type="text/javascript">
	$(window).on('load', function() {
		setTimeout(function() {
			$("#loading").fadeOut();
		}, 2000);
	});
	</script>

<style type="text/css">
	#loading {
		position: fixed;
		top: 0px;
		width: 100%;
		height: 100%;
		z-index: 10000;
		background: #0E111F;
		opacity: 0.9;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#loading > img {
		width: 40%;
		height: auto;
	}
	@media screen and (max-width: 800px) {
		#loading > img {
			width: 100%;
			height: auto;
		}
	}
	</style>
<!-- 로딩화면 끝 -->

<s_t3>

 

 

 

 

 

4] 광고가 나오면 사라지는 로딩 화면

 

07-try-catch-01

 

 

상기 예시 이미지를 보면 구글 애드센스(Adsense) 광고가 나오는 것을 인식하면서 로딩 화면(loading screen)이 사라지는데, 수익형 티스토리 블로그 운영에 필수라고 할 수 있다.

 

'로딩이 완료된 상태의 사이트'를 보여줄 수 있고, 단순 로딩 화면(loading screen)의 단점이었던 '결과적으로 로딩 완료가 지연되는 것'도 말끔히 해결할 수 있다.

 

 

 

 

 

4-1] HTML 작업 - <body> 아래

아래 코드를 HTML의 <body> 아래에 삽입한다.

 

<body>


<!-- 로딩화면 시작 -->
<div id="loadOverwrapper">
	<div class="loader"></div>
	</div>
<!-- 로딩화면 끝 -->


<s_t3>

 

 

 

 

 

4-2] HTML 작업 - </body> 위

아래 코드를 HTML의 </body> 위에 삽입한다.

 

<!-- 로딩화면 시작 -->
<script>
	function rmLoadOverwrapper() {
		document.querySelector("#loadOverwrapper").style.display = "none";
	}
	try {
		document.querySelector("ins.adsbygoogle").onload = function() {
			rmLoadOverwrapper();
		}
		setTimeout("rmLoadOverwrapper()", 0000);
	}
	catch(err) {
		setTimeout("rmLoadOverwrapper()", 3000);
	}
	</script>
<!-- 로딩화면 끝 -->


</body>

 

 

 

[ 3 ~ 4 ]

<body> 아래에 삽입했던 loadOverwrapper div 코드를 제거하는 함수다.

 

[ try, catch ]

try { . . . } 내의 코드가 실행되는데, 에러가 없다면 try { . . . } 내 코드의 마지막 줄까지 실행되고 catch는 실행되지 않는다. 에러가 있다면 try { . . . } 내의 코드가 실행되지 않고 catch(err) 내의 코드가 실행된다.

 

try {
// 실행 코드
}
catch(err) {
// 에러 핸들링 코드
}

 

[ 6 ~ 11 ]

absbygoogle ins 코드가 onload 되면 (찾으면) loadOverwrapper div 코드를 제거하는데, setTimeout 코드를 삽입해서 제거 시간을 0초로 설정한다.

 

[ 12 ~ 14 ]

만약 absbygoogle ins 코드가 onload 되지 않아도 (찾지 못해도) loadOverwrapper div 코드를 제거하는데, setTimeout 코드를 삽입해서 제거 시간을 3초로 설정한다.

 

 

 

 

 

4-3] CSS 작업

아래 코드를 CSS에 삽입하면 모든 코드 삽입이 완료된다.

 

/* 로딩화면 */
#loadOverwrapper {
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background: #fff;
	opacity: 0.9;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}
.loader {
	width: 100px;
	height: 100px;
	border: 5px solid white;
	border-right-color: blue;
	border-top-color: blue;
	border-radius: 100%;
	-webkit-animation: spin 1000ms infinite linear;
	animation: spin 1000ms infinite linear;
}
@-webkit-keyframes "spin" {
	from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	to { -webkit-transform: rotate(359deg); transform: rotate(359deg); }
}
@keyframes "spin" {
	from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
	to { -webkit-transform: rotate(359deg); transform: rotate(359deg); }
}

 

 

 

 

 

4-4] 작동 테스트 ①

아래 예시 이미지는 try { . . . } 내의 코드인 setTimeout을 '3초'로 설정한 결과로, absbygoogle ins 코드가 onload 돼도 loadOverwrapper div 코드는 '3초' 뒤에 제거된다.

 

08-try-catch-02

<!-- 로딩화면 시작 -->
<script>
	function rmLoadOverwrapper() {
		document.querySelector("#loadOverwrapper").style.display = "none";
	}
	try {
		document.querySelector("ins.adsbygoogle").onload = function() {
			rmLoadOverwrapper();
		}
		setTimeout("rmLoadOverwrapper()", 3000);
	}
	catch(err) {
		setTimeout("rmLoadOverwrapper()", 6000);
	}
	</script>
<!-- 로딩화면 끝 -->

 

 

 

 

 

4-5] 작동 테스트 ②

아래 예시 이미지는 try { . . . } 내의 코드인 absbygoogle ins 코드를 abcdefg로 변경한 결과로 아무것도 인식하지 못하기 때문에, try { . . . } 내의 코드가 실행되지 않고 catch(err) 내의 코드가 실행되어 loadOverwrapper div 코드가 '5초' 뒤에 제거된다.

 

09-try-catch-03

<!-- 로딩화면 시작 -->
<script>
	function rmLoadOverwrapper() {
		document.querySelector("#loadOverwrapper").style.display = "none";
	}
	try {
		document.querySelector("abcdefg").onload = function() {
			rmLoadOverwrapper();
		}
		setTimeout("rmLoadOverwrapper()", 2000);
	}
	catch(err) {
		setTimeout("rmLoadOverwrapper()", 5000);
	}
	</script>
<!-- 로딩화면 끝 -->

 

 

 

 

 

5] 로딩 중 스크롤 금지

 

'4-2'의 HTML 코드에 이어서 아래 코드를 추가하면 로딩 중에는 스크롤이 되지 않는다.

 

	$('#loadOverwrapper').css({'overflow': 'hidden', 'height': '100%', 'touch-action': 'none'});
	$('#loadOverwrapper').on('scroll touchmove mousewheel', function(event) {
		event.preventDefault();
		event.stopPropagation();
		return false;

</script>

 

 

 

 

 

 

 

 

 

 

지금까지 화면 상 효과들과 광고가 나오면 사라지는 로딩 화면을 생성하는 방법에 대해 설명했다. 테스트까지 해본 결과 구글 애드센스(Adsense) 광고가 나오면 로딩 화면이 사라지는 것을 확인할 수 있다.

 

본 효과를 적용한다고 해서 수익이 향상되는 것은 아니나 수익 향상을 위한 기본 토대임은 분명하니 각자의 티스토리에도 적용해 보기 바란다.

 

 

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

관련글

티스토리툴바