제 블로그에 오시면 페이지 로딩중에 이런 화면을 만나실 수 있습니다.
여러가지 기능들을 블로그에 달아둬서 로딩이 느려지는 경우가 있더군요. 거기에다 IE브라우저에서 접속한다면 뚝뚝 끊기면서 느려터진 로딩을 보여주어서 한번 적용해 보았습니다.
쿠나씨가 배포하고 있지만 저는 적용방법을 알려드리겠습니다:)
우선 로딩 이미지가 필요하겠지요?
로딩 이미지를 배포하는 사이트 몇 곳을 모아보았습니다.
http://www.loadinfo.net/로딩 이미지를 구하셨다면 이제 적용을 해봅니다.
http://www.ajaxload.info/
http://preloaders.net/
http://mentalized.net/activity-indicators/
스킨편집에 들어가셔서 적용하실 로딩 이미지를 업로드 합니다.
업로드 후에 <body>태그 대신에 <body onload="switchScreen();"> 이렇게 바꿔줍니다.
그 아래에 이런 소스를 입력해주세요.
<script type="text/javascript">
//<![CDATA[
function switchScreen() {
document.getElementById("divLoading").style.display = "none";
document.getElementById("divBody").style.display = "";
}
//]]>
</script>
<div id="divLoading" style="position:absolute; top:35%; left:0; width:100%; text-align:center; margin:0 auto;">
<img src="./images/이미지주소" alt="로딩중" /><br>로딩중..
</div>
<div id="divBody" style="display:none;">
.
.
.
.
</div><!-- /divBody -->
</body>
</html>
꼭 </div><!-- /divBody --> 이 태그는 </body> 바로 앞에 넣어주세요.
보라색으로 표시된 곳은 수정해 주셔야 될 부분입니다. top:35%;는 출력될 로딩 메세지의 위치이니 수정을 거쳐 보기 좋은 위치에 놓아주세요.
이렇게 적용하시면 완성입니다.
트랙백 1개 | 댓글 34개
트랙백+댓글 | 트랙백 | 댓글
-
About Trackback
트랙백 기능을 이용하시면 이 밑부분에 당신의 글을 댓글처럼 달아놓으실 수 있습니다. 이 글의 트랙백 주소는 http://blog.yaluka.com/trackback/53 입니다.
-
Trackback from 영민C
요즘 한참 회사에서 Ajax를 이용한 작업을 하고 있습니다. 요 Ajax라는 놈 잘 쓰면 아주 효율적이고 아주 폼나는 녀석이더라구요. 역시 Ajax에 대해서 물에 닿으면 바로 젖어버리는 습자지식 지식을 가지고 있기에 이놈이 어떤 놈이다라고 정의도 내려 드릴수 없으며, 함부로 내린 정의 어디가서 사용하시다가 친구관계 틀어지고 회사에서 구박받고 학교에서 따 당할 수 있는 사태를 막고자 아에 엄두도내지 않습니다. 그냥 소개시켜드리려고 하는 것은 제목과 같../ 2009/05/18 17:33 / delete
-
하얀별 at 2009/05/17 19:53 / Permalink / Reply / Modify/Delete초치는 이야기지만 로딩 이미지 때문에 해당 페이지의 로딩 시간이 더욱 길어진다는 사실 알고 계시나요? 물론 완전한 로딩이 끝난 페이지를 볼수 있어 좋치만 조금은 로딩 속도를 늦추는데 로딩이미지가 한 몫 한답니다.
-
Reply by
얄루카 at 2009/05/18 07:44 / Permalink / Modify/Delete뚝뚝 로딩되는 모습에 좀 더 보기좋게하려고 사용하시면 좋겠어요
-
-
쿠나 at 2009/05/17 20:30 / Permalink / Reply / Modify/Delete사실 저도 얄루카 님 로딩 이미지 갖다 쓴겁니다.. 얄루카님 것 보고 아이디어를 얻어서 만든거고요 ^^;.. 그런데 로딩중에 가끔씩 제대로 로드되지 않는 것이 있어서 그것을 처리하기 위해서 본문을 후에 보이게 하는 것을 없앴습니다.
-
Reply by
얄루카 at 2009/05/18 07:46 / Permalink / Modify/Delete로딩중에 로드가 안되는 것은 본적이 없는거 같은데요?
(브라우저 탓인가 ;ㅁ; )
-
-
사진우주 at 2009/05/18 01:44 / Permalink / Reply / Modify/Delete후훗..... ..... 또 한번더 할것들이 생겼군요..후후후..
-
Reply by
얄루카 at 2009/05/18 07:47 / Permalink / Modify/Delete자신의 블로그가 느리지 않다면 적용시키지 않는 것도 좋아요~
-
-
야이노마 at 2009/05/18 13:30 / Permalink / Reply / Modify/Delete유용한 팁인거 같습니다.
제 블로그에도 한번 적용해 봐야겠네요.
혹시 느리지 않는 블로그에 설치하면 더 느려지는 건 아닌가요????
제 블로그의 로딩속도가 궁금해지네요-
Reply by
얄루카 at 2009/05/18 16:02 / Permalink / Modify/Delete그렇게 느려지지 않는답니다^^
한번 적용해 보시는것도 나쁘지 않아요
-
-
영민C at 2009/05/18 17:34 / Permalink / Reply / Modify/Delete좋은 팁이네요. ^^;
-
Reply by
얄루카 at 2009/05/19 07:40 / Permalink / Modify/Delete도움이 되셨길 바랍니다^^
-
-
누 at 2009/05/18 20:51 / Permalink / Reply / Modify/Delete한번 해볼까.. 했는데.. 로딩이 할게 없어서 휙- 지나가도 쵸큼 문제네요 (...) 별로 멋져보이지 않는달까.. 그런 문제점이..!
-
Reply by
얄루카 at 2009/05/19 07:40 / Permalink / Modify/Delete헉! 멋진 이미지를 한번 찾아보세요
-
-
Mitenisaki at 2009/05/19 02:45 / Permalink / Reply / Modify/Delete왠지 더 오래걸리는거 같다.
시간되면 써먹을지도 모름..ㅋ-
Reply by
얄루카 at 2009/05/19 07:53 / Permalink / Modify/Delete
-
-
청초 at 2009/05/19 19:28 / Permalink / Reply / Modify/Delete흠흠 ... 블로그 꾸미기 따위...ㄷㄷ
-
Reply by
얄루카 at 2009/05/20 18:44 / Permalink / Modify/Delete
-
-
沢渡 サユリ at 2009/05/19 20:34 / Permalink / Reply / Modify/Delete뭔가;;;;;;;
블로그 로딩화면 덕에 핸드폰 유자드웹으로 님 블로그 들어오기가 막막해졌어요..
멈췄다는..(쩝)-
Reply by
얄루카 at 2009/05/20 18:45 / Permalink / Modify/Delete헐. 핸드폰으론 인터넷을 해보질 않아서 orz//
-
-
초보 at 2009/05/19 23:49 / Permalink / Reply / Modify/Delete오...
이런 기능도!!
허나 핸드폰으로 들어오면 진짜 멈출거 같군요 ㄷㄷ-
Reply by
얄루카 at 2009/05/20 18:45 / Permalink / Modify/Delete네 ㅠ.ㅠ 멈추신다네요
-
-
이프위너 at 2009/05/20 01:08 / Permalink / Reply / Modify/Delete오오 이런기능이
-
Reply by
얄루카 at 2009/05/20 18:46 / Permalink / Modify/Delete한번 적용해 보세요^^
-
-
미도리 at 2009/05/20 23:51 / Permalink / Reply / Modify/Delete안녕하세요~~
보컬로이드 노래 많이 다운받고 있습니다. ㅎㅎ
뒷배경 아.. 까먹었네요. 러키스타 캐릭터 같은데 ㅋㅋ-
Reply by
얄루카 at 2009/05/21 15:56 / Permalink / Modify/Delete^^
-
-
Joshua.J at 2009/05/21 16:45 / Permalink / Reply / Modify/Delete앜 전 미리보기하면 계속 필수 태그를 찾을 수 없습니다 : s_list 라고 나오는데요;ㅁ;
-
Reply by
얄루카 at 2009/05/21 16:50 / Permalink / Modify/Deletes_list 태그를 지웠을때 일어나는 일로 사료됩니다.
s_list 태그를 복구하셔야겠습니다
-
-
junom at 2009/05/23 01:45 / Permalink / Reply / Modify/Delete좋은 팁인거같습니다. 잘보고갑니다.
-
Reply by
얄루카 at 2009/05/23 14:15 / Permalink / Modify/Delete도움이 되셨기를^^
-
-
Red Penguin at 2009/06/01 12:16 / Permalink / Reply / Modify/Delete좋은 정보 감사합니다..
블로그 꾸미기가 힘들군요 ;;
불여우를쓰신다니.. 왠지 동료?!-
Reply by
얄루카 at 2009/06/04 17:04 / Permalink / Modify/Delete하하; 불여우의 확장기능의 푹빠져서 해어나오지 못하고있네요 ㅠㅠ
-
-
어법상옳음 at 2009/08/20 22:07 / Permalink / Reply / Modify/Delete좋은자료 감사합니다.
블로그에 적용해봐야겠군요-
Reply by
얄루카 at 2009/08/21 07:29 / Permalink / Modify/Delete도움이 되셨다니 기쁘네요^^
-
-
윈컴이 at 2010/01/01 15:00 / Permalink / Reply / Modify/Delete조금 느려진것 같지만(?)괜찮네요. 많이 느려졌다고 생각하면 지워야 겠네요ㅎㅎ
-
Reply by
윈컴이 at 2010/01/01 15:07 / Permalink / Modify/Delete너무 느려졌어요ㅠㅠ 바로 지웠답니다.
-
-
Write your comment
