티스토리 블로그 페이지 이동 시 로딩바를 달아보자.

네. 안녕하세요! 엑수시아입니다. 오늘은 전에 제 블로그에 "매지구름" 님께서 물어보신 페이지 이동시 로딩바에 관해 설명하려고 합니다. 한마디로 말하자면 약간의 트릭이 들어간 꼼수...... 라고 생각하시면 됩니다.

설명하기에 앞서 "티스토리 블로그 스킨 2개 적용하기."라는 포스팅에서 사용했던 이미지를 하나 가져와야겠군요. (다시 사용하게 될 줄이야...으허허)

위의 그림을 잠시 생각해봅시다. 우리가 구현하고자 하는 로딩바는 1번 시점 부터 4번시점의 사이에 들어가게 됩니다. 즉 서버 호출이 끝나고 HTML 막 호출 되기 시작할 때부터 로드(모든 문서와 DOM 트리가 완성되는 시점 즉, 4번 지점) 할 때까지의 사이를 말합니다.

그럼 본격적으로 로딩바를 달아보도록 하죠.

1단계

이미지를 하나 준비합니다. 홈페이지 분위기와 잘 맞아야 합니다. 그리고 로딩이라는 느낌이 들 수 있어야 하죠. 저는 아래와 같은 이미지를 준비했습니다.

2단계

먼저 자기 자신의 블로그 스킨의 DIV 중 최상위 DIV 를 찾습니다. <div> 태그에 다음과 같이 속성을 추가합니다. <div style="display:none;"> 최상위 DIV 에 display:none; 라는 속성을 추가했으니 아무 것도 안 보이게 됩니다. 그리고나서 최상위 DIV 위에 DIV 태그를 하나 더 만듭니다. 일명 트릭 DIV 인것이죠. 그리고 그 DIV 안에 1단계에서 준비해둔 이미지를 넣습니다. 제 소스에는 아래와 같이 작성되어 있습니다.

<div class="loading" style="width: 100px;margin:0 auto;padding-top: 300px;">

<img src="./images/loading10_2582kk.gif" />

</div>

3단계

2단계까지 이해가 되셨다면 3단계는 무엇을 해야할지 감이 오셨으리라 생각합니다. 제이쿼리로 4단계 시점에 이르면 2단계에서 만들어 두었던 DIV의 display 속성을 none 으로 바꾸고, 최상위 DIV 속성을 block 로 바꾸는 작업을 하면 됩니다. 그러면 페이지가 로딩되는 듯한 효과를 보여줍니다.(실제로도 로딩이 되는 것이 맞습니다. ^^) 제 소스에는 아래와 같이 되어 있습니다.

$(window).load(function(){

$('.loading').css('display','none');  //로딩 DIV 를 감춤

$('#wrap').css('display','block');    //감추고 있었던 최상위 DIV를 노출시킴

});

이상 설명을 마칩니다. 유용한 정보가 되었길 바랍니다. ^^

소스 파일.txt

(소스 파일을 첨부합니다. 혹여나 잘 안되시는 분들은 댓글을 남겨주세요. 블로그 주소를 남겨주시면 확인해보고 연락드립니다. ^^)

불펌행위를 용납하지 않습니다.