티스토리에 로딩화면을 만들어보자.

우선 이 로딩화면을 추가 할때 단점부터 이야기 하자면 로딩이 필요 없는 부분(?)에서도 로딩화면이 돌기 때문에 사실상 로딩이 더 길어지는 것이 사실이다. 물론 체감상 그리 큰 차이는 아니지만 수치적으로는 그렇다.

즉 바로 보여도 되는 페이지도 로딩화면이 돌기 때문에 그런 단점이 생기는 것인데 로딩 자체 역시 그리 길지 않기 떄문에 체감이 크지 않다고 말할 수 있다. 여하튼 장점과 단점이 확실하기에 이 내용을 포스팅을 할까 말까 하다가 선택은 여러분의 몫으로 남기고 로딩화면이 필요하신분들에겐 좋은 자료가 될 것 같아서 포스팅 한다. 굉장히 간단하니 쉽게 할 수 있을 것이다.

HEAD와 /HEAD 사이에 추가


<style>
.preloader {
display:inline;
z-index: 2000;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: white;
transition: opacity .65s ease;
}
.loading-bar {
width: 12%;
height: 4px;
background-color: #000;
transition: width 1000ms cubic-bezier(.25, 0, 0, 1); 
}
</style>

<script>
  document.addEventListener("DOMContentLoaded", function() {
  	requestAnimationFrame(function() {
			document.getElementById("loadingBar").style.width = "100%";
      });
    });
</script>
필자가 사용한 로딩화면 CSS 코드다.

여기에서 포인트는 .loading-bar 에서 background-color와 바로 밑에 transition의 width를 변경하는 것인데 background-color는 알다시피 로딩바의 색을 조절할 수 있고 width는 로딩바의 길이를 말하는데 클수록 자체 로딩이 길어진다. 필자는 1500이 적당하다고 생각한다. head가 길어지는 것이 싫으신분은 CSS에 style 부분을 추가하시고 script 부분은 js파일로 만들어서 업로드 후 불러오는 쪽으로 하시길 바란다.

BODY 바로 밑에 추가

<script>
window.onload = function () {
document.getElementById("loadingIndicator").style.opacity = "0";
setTimeout(function() {
    document.getElementById("loadingIndicator").style.display = "none";}, 450);
}
</script>

<div id="loadingIndicator" class="preloader">
     <div id="loadingBar" class="loading-bar"></div>
</div>

BODY의 바로 밑에 그대로 복사해서 붙이면 끝이다.


마지막 부분에 450수치는 로딩이 완료후 페이드 되는 수치다. 0으로 하면 페이드가 되지 않고 바로 보인다. 그러나 변경하는 걸 추천하지 않는다. 이제 새로 고침을 하면 사이트 상단에 로딩바가 보일 것이다.
궁금한점이 있거나 안되는 부분이 있다면 댓글 남겨주시면 답해드리도록 하겠다.

출처 https://thinking-twins.webflow.io/preloader

댓글을 달아 주세요

  1. Marshall K

    로딩 화면 넣기가 주저되는 이유를 정확하게 쓰셨네요.
    중국에서 vpn으로 우회해서 들어오는 수준 아니고서야 1~2초 내로 끝나는 로딩이라 뭔가 넣어야 할까...싶습니다 ㅋㅋㅋ

    • Marshall K
      2018.08.03 22:50 신고

      그래도 꽁기웹디님 하신 거보니 예쁘긴 하네요

    • 꽁기웹디
      2018.08.03 23:32 신고

      맞아요~ 이 팁은 진짜 로딩이 필요하신분 또는 '퍼포먼스가 중요해' 라는 분들에겐 도움이 되실거 같아요~ 티스토리에만 적용하는게 아니니까요^-^; 이게 은근히 찾을려면 없더라구요! 좋게 봐주셔서 감사해용~^^

  2. SONYLOVE

    저도 로딩바를 사용하지 않는 가장 큰 이유가 할 필요가 없을만큼 빠르기때문이라는...

  3. 라디오키즈

    시각적으로는 보기 좋지만, 오히려 사이트 로딩에 발목을 잡을 것 같기도.ㅎㅎ

  4. 묘한오빠

    로딩바만 멋진게 아니고 웹디님 블로그의 스킨이 정말 장난아니네요 ^^
    날씨가 선선할때 여기와서 잘 보고 배워가야겠습니다.
    좋은 정보 감사합니다