티스토리에 로딩 이미지 설정하는 방법

어떤 티스토리 블로그는 방문하면 '로딩 중' 이미지가 화면에 나타나는 것을 볼 수 있습니다. 혹시 이 이미지가 왜 표시되는 것인지 생각해 본 적이 있으신가요? 별거 아닌 것 같은 이 '로딩 중' 이미지로 인해 다음과 같은 효과를 얻을 수 있습니다.

 

 

유입자 이탈률 감소와 체류시간 증가

 

 

 

'로딩 중' 표시 없이 화면 로딩이 오랜 시간 걸린다면, 오류가 생겼다고 생각하거나 짜증 나서 페이지를 나가는 경우가 많습니다. 연구 결과에 의하면 이 시간은 대략 3초 정도라고 합니다.

 

“웹사이트 접속자, 로딩시간 3초 넘으면 그냥 나간다”

 

하지만 로딩 중 이미지가 뜬다면 페이지가 로딩될 때까지 더 오랜 시간을 기다리게 됩니다.

 

 

 

 

티스토리에 로딩 중 이미지 설정하는 방법

티스토리에는 몇가지 플러그인이 있지만, 로딩 중 이미지를 표시하는 플러그인은 없기 때문에 별도로 구현해야 합니다.

 

1. '로딩 중' 이미지 찾기

구글이나 무료 아이콘 사이트 등에서 원하는 이미지를 다운로드합니다. 여기서 다운로드하는 이미지는 움직이는 gif 이미지를 다운로드합니다. 만약 png 같은 고정된 이미지를 사용한다면 웹 페이지가 멈췄다는 느낌을 줄 수 있습니다.

또한, 유료 이미지를 잘못하면 저작권 문제에 걸릴 수 있기 때문에 반드시 무료 이미지를 사용합니다.

 

다운로드 받은 후 파일 이름을 'loading'으로 변경합니다.

 

2. 로딩 중 이미지를 티스토리에 업로드

1) 티스토리 관리자 모드 > 꾸미기 스킨 편집 클릭

 

2) HTML 편집 클릭

 

3) 파일 업로드 탭 클릭

4) 추가 버튼 클릭

5) 적용 버튼 클릭

 

 

 

6) 로딩 화면 동작 코드 삽입

HTML 탭 클릭 > Ctrl + F 단축키로 </body> 찾은 후 바로 위에 다음 코드 삽입하고 적용버튼 클릭

<!-- 로딩 코드 시작 -->
<script type="text/javascript">
  $(window).on('load', function () {
    $("#loading").hide();
  });

  function closeTime() {
    setTimeout(function(){
	  $("#load").hide();
    }, 2500);
  }
</script>
	
<style type="text/css">
  #loading {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	display: block;
	opacity: 0.8;
	background: white;
	z-index: 99;
	text-align: center;
  }

  #loading > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 100;
  }
</style>
	
<div id="loading">
  <img src="./images/loading.gif" alt="loading">
</div>

<!-- 로딩 코드 끝 -->

 

로딩 코드 중 아래 코드는 로딩 이미지가 나왔다가 사라지는 시간에 대한 설정입니다.

function closeTime() {
  setTimeout(function(){
    $("#load").hide();
  }, 2500);
}

 

만약 이 설정이 없다면 로딩이 완료될 때까지 로딩 이미지가 무한으로 재생됩니다.

로딩 이미지가 무한히 재생된다면 답답한 마음에 이탈자들이 생기므로, 어느 정도 재생 후 없애주는 것입니다.

2500은 2.5초를 나타내는 것으로, 시간은 조절하면 됩니다.