ART of WEB

"엑수시아"

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

[2015-08-30 블로그 이전 안내]

안녕하세요. 서토리(구 필명 엑수시아)입니다. 전문적인 개발 블로그로 다시 태어나기 위해 부득이하게 블로그를 이전하게 되었습니다. 앞으로는 아래의 주소로 접속 부탁드립니다. 감사합니다.

서토리 블로그 바로가기

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


설명하기에 앞서 "티스토리 블로그 스킨 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

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


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

태그목록> , , , , , , , , ,

COMMENT

비밀글 Add Comment
  1. BlogIcon 윈컴이 ㆍ2013.05.12 00:07 신고ReplyEdit

    다른 글과 달리 설명 해주셔서 감사합니다 ~

  2. BlogIcon 위드와플 ㆍ2013.05.12 02:05 신고ReplyEdit

    요즘 속도와 디자인이라는 두마리 토끼를 잡는 추세인데 로딩바가 필요할지는 잘 모르겠네요.
    빠른 속도로 로딩이 되는데 굳이 로딩바가 필요할까?라고 질문을 날려봅니다.

    • BlogIcon 엑수시아 ㆍ2013.05.12 08:28 신고Edit

      안녕하세요 위드와플님 ^^
      제 블로그에 달려있는 로딩바는 그저 멋을 위해 달려있는건 아닙니다. ^^
      저는 티스토리 블로그로 여러가지 테스트(?)를 해보고 있는데요 ㅎㅎ; 특이하게도 제 블로그는 css를 스킨별로 쪼개서 제이쿼리로 로드되고 있습니다. 즉 위에 그림으로 보자면 2번 지점에서 css 가 로딩됩니다. 그러면 2번과 3번 사이에 완성되어서 보여지는 DOM 형태의 HTML 은 모조리 깨져서 보여주게 됩니다. 저는 그것을 트릭으로 잠시 감추었다가 css 까지 모두 로딩 된 다음에 보여주고 있는거지요.

      역으로 속도가 느렸다면 css를 쪼개지도, 로딩바를 달지도 않았을 껍니다.

      그나저나 위드와플님 블로그 디자인이 짱짱이네요! 이웃추가 하러 갑니다. ^-^

    • BlogIcon 위드와플 ㆍ2013.05.12 14:32 신고Edit

      아... jQuery의 로딩이 css후라서 그런 현상이 발생하는군요.
      저도 ie8로 볼때에는 0.5초간 jQuery가 적용되지 않는 현상이 발생하네요. 크롬에서는 제대로 나오는데 말이죠.


      이래저래 제 블로그는 블로그를 넘어서 하나의 브랜드로 만들어보고 싶어서 이래저래 신경쓰는것도 많아요 ^^ 로고도 그렇고요ㅎㅎ

    • BlogIcon 위드와플 ㆍ2013.05.12 14:40 신고Edit

      jQuery를 이용해서 이런거 제작해볼려고 하는데 아직 배우지 않아서 힘드네요. 제목부분의 카테고리의 링크와 주소가 똑같은 주소를 가진 카테고리는 굵게 설정하는 건데...

      예를 들면 공지사항을 클릭하면 카테고리의 공지사항이 굵게 변하는 위치인식을 하게 하고 싶은데 어떻게 해야할지도 모르겠고 헷깔리군요. 그래서 포기하긴 했지만...흐흐;;

    • BlogIcon 엑수시아 ㆍ2013.05.13 19:19 신고Edit

      노력하는 모습이 보기 좋네요 ㅎㅎ!
      마지막에 달린 댓글내용으로 봐서는 잘 생각해보면 해결 할 수 있는 문제일 껏 같습니다. ^^
      치환자 중에 [ ##_article_rep_category_## ] 이라는 카테고리 명을 출력하는 부분이 있으니 제이쿼리로 카테고리 val 을 뒤져서 같으면 굵게 한다던지 처리하면 될껏 같네요.
      시간나면 한번 포스팅해봐야겠습니다. ^^

    • -.-
      -.- ㆍ2013.08.01 01:05 신고Edit

      서버가 항상 같은속도로 빠르게 되면 당연히 좋기야 좋겠지만 디자인도 좋고 기능도 좋아지는만큼 홈페이지 무게도 커진다는것을 모르시는것같네..

    • BlogIcon 위드와플 ㆍ2013.08.01 01:32 신고Edit

      개발자의 입장이 아니라 보는 사람들의 입장에서 말씀드려보겠습니다.


      인터넷을 하루에도 몇페이지, 몇백페이지를 보는 사람들이 수두룩 합니다. 정보화시대이다 보니 자신이 원하는 페이지를 보기 마련이죠.
      그런데 "아 괜찮다"라고 생각한 사이트가 있는데, 그 사이트의 정보를 얻기 위해서 이곳저곳 왔다갔다 할때 0.5~1초의 약간의 로딩이 있다면 어떨까요?

      분명히 답답할겁니다. 요즘 시대가 예전과는 많이 달라졌습니다. 이 사이트가 로딩되고 있는 사이에도 누군가는 이미 내용을 보고있을 겁니다.

      우리들이 역시 LTE라고 하면서도 LTE-A를 보고 감탄하는 것처럼, 보는 사람들은 그 "로딩"을 독처럼 생각하지 않을까 생각하네요.

  3. BlogIcon 가람빛 ㆍ2013.05.12 03:14 신고ReplyEdit

    좋은 팁 감사합니다^^ 근데 위드와플님 말씀대로 로딩바가 있으면 블로그가 느리다는 느낌을 줄 것 같긴 하네요.. 여튼 이웃추가하고 갑니다^^

    • BlogIcon 엑수시아 ㆍ2013.05.12 08:42 신고Edit

      감사합니다 가람빛님!^^ 로딩바라는것 자체가 약간 느리다 라는 느낌이 들기는 하네요 ㅎㅎㅎ;;

  4. BlogIcon 매:지구름 ㆍ2013.05.12 10:49 신고ReplyEdit

    인터넷 속도가 빠르긴 하지만, 그래도 웹브라우저에서 가끔은 버벅거려 위젯이나, 좀 무거운 태그를 달면 조금은 기다려야 되는데, 로딩바를 하나 달면 그나마 괜찮겠다는 생각이 들어 요청하였는데 이렇게 포스팅까지 해주시니 감사합니다. 스마트폰에서도 물레방아 같은 로딩이미지는 들어가죠, 덕분에 HTML에서 Server단 Call, DOM 트리완성시점, 제이쿼리 실행시점 $(document).ready, 이미지로드 시점, 자바스크립트 라이브러리 jQuery $(windows).load, 실행시간의 구조를 알게 되었네요. 여러 어플리케이션 제작시에 구현하며 응용한번 해봐야겠습니다. 저는 로딩이미지를 분위기에 맞게 만들어서 하나 달면 멋찌겠습니다. 안드로이드나, iOS, Windows 8 스마트폰의 물레방아도 같은 프로세스이겠죠.. *^^* 좋은 팁 감사합니다. ^^ 메지구름이 아니구 매지구름입니다. ^^

  5. BlogIcon 매:지구름 ㆍ2013.05.12 12:08 신고ReplyEdit

    티스토리 기본 스킨의 HTML구조와 CSS의 구조를 미리 MVC패턴으로 변경을 해서 위의 코드를 넣어야 님께서 구현하신 로딩이미지를 제이쿼리로 로드할수 있겠네요... ^^

  6. BlogIcon 눈싹 ㆍ2013.05.14 18:51 신고ReplyEdit

    좋은 정보 감사합니다. ^^!

  7. BlogIcon Constantine B2 ㆍ2013.09.01 10:34 신고ReplyEdit

    http://kaidokid-1412.tistory.com 에넣었는데 이상해요
    뭐가문제죠 알려주세요