지루하다..

홈페이지의 특정 글을 클릭하고 로딩될 때까지 기다려야한다. 뭐 물론 참을성이 없는 나는 그냥 로딩되는 중간부터 쭉 읽기 시작하기는 하는 편이다. 암튼 블로그에 들어온 사람들이 포스팅에 들어갈라하는데, 해당 글이 이미지도 많고 gif도 많아서 로딩될 때까지 넘 오래걸린다면 중간에 귀찮아서 나가버릴 것이다. 그럼 굉장히 슬플 것이다.

이런저런 홈페이지에서 이런 문제를 한번쯤 생각해보았을 것이다. 그렇기 때문에 보다 유입된 사람들을 유치시키기 위해서는 다음과 같이 방해공작이 필요하다. 어떤 방법인고 하니

아래와 같은 로딩창에 사용될 고양이를 가져다놓는 것이다. 그러면 사람들이 얘가 발바닥 먹는 모습을 보다가 혼이 빠져서 뒤로가기 버튼을 누를 생각을 못할 것이다.

loading.html 만들기

홈페이지의 부분부분마다 코딩하는 것보다 단순히 html 파일을 하나 만들어놓고 이걸 include하는 방식이 더 간단하다. 따라서 다음과 같이 loading.html을 만들어준다.

<div id="load">
  <img src="/assets/images/loading.gif" alt="loading">
</div>

<script >
  const loading_page = document.getElementById("load");
  window.onload = function(){
    loading_page.style.display = 'none';
  }
</script>

여기서 쓰인 loading.gif 파일은 다음 사이트에서 구할 수 있다. 로딩용 gif 받기
본인은 파비콘부터 고양이이기 때문에 디자인 통일을 위해 고양이로 결정하였다. 바로 위에 보이는 저 발바닥 먹는 친구가 위의 링크에서 받아온 gif 파일이다. 그래서 위의 html 파일에 보이는 것과 같이 img src = 부분에 맞게 넣어주면 된다.

css 파일 수정해주기

위에서 javascript를 설명 안하고 그냥 넘어왔는데, 간단하게 말하자면 window가 로딩이 끝나면 loading_page라는 애를 display하지 않겠다는 의미가 된다. 그렇다면 loading_page는 로딩이 끝나기 전에 '나 아직 로딩중이니까 좀만 기달려봐유' 하는 형태가 되어야하기 때문에 다음과 같이 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;
}

이렇게 수정하고 나면 모든 작업이 완료된다. 그리고 각자 원하는 부분에 해당 html을 include 시키면 되는데, 본인은 우선 가장 바깥쪽이랑 각 post에 대해서, 그리고 프로젝트 페이지에 대해서만 적용해주었다. 결과물은 다음과 같다.