TISTORY에서 PreLoading사용하기

TEXTCUBE에서 사용하던 PreLoading을 TISTORY에서

사용하는 방법을 알아보겠습니다.

예전에 제가 만들었던 PreLoading PLUGIN이  있습니다.

 

2008/04/02 - [텍스트큐브] - JS PreLoading(프리로딩 플러그인)

 

TISTORY에서는 플러그인을 직업 업로드가 않되어서

SKIN을 편집해서 사용하면 됩니다.

 

HTML/CSS 편집에서

 

<s_t3>를 찾아 위에 아래 내용을 삽입합니다.

   1:  <!-- PreLoading -->

   2:  <div align="center" id="loadingBar" style="position:absolute; top:47%; left:40%;">

   3:  <img src="./images/loading00.gif" border="0">

   4:  </div>

   5:  <div id="PredivBody" style="display:none">

3번째줄의 이미지는 업로드해야하며, 이름을 같게하거나 변경해야합니다.

이미지는 예전게시물에 다운받으세요.

 

그리고, 끝부분에 </s_t3> 뒤에 아래 내용을 삽입합니다.

   1:  </div>

   2:  <script language="javascript" type="text/javascript">

   3:  if (window.ActiveXObject){ 

   4:  document.onreadystatechange = function () {

   5:  if (document.readyState=='complete') 

   6:  {

   7:  DisplayLoadingBar();

   8:  }}} 

   9:  else

  10:  {

  11:  window.onload = function() { 

  12:  DisplayLoadingBar();

  13:  }}

  14:   

  15:  function DisplayLoadingBar()

  16:  {

  17:  document.getElementById('loadingBar').style.display="none";

  18:  document.getElementById('PredivBody').style.display="";

  19:  }

  20:  </script>
 

이제 잘 작동하는지 확인하면 끝입니다.

 

덧, 파비콘이나 블로그아이콘을 사용하는 경우

덧글 또는 방명록에 글을 남긴사람이 블로그를 폐쇄한경우 화면 딜레이가

너무길어 Preload 이미지가 한참동안 나오는 경우가 있습니다.

이런 경우 플러그인을 사용해제하면 됩니다.