로딩중 이미지 표시하기..

처리할 데이터나 이미지가 많아서 로딩이 느린 페이지에서 간단한 자바스크립트를 사용하여 로딩이미지를 표시하는 방법입니다.

페이지의 Body 시작부분과 끝부분에 다음 코드를 삽입하여 로딩이미지를 표시하여 줍니다.

<!-- Loding Image -->

<div id="loadingBar" style="position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; margin:0 auto; z-index:100000;">

<table width="100%" height="100%" border="0" bgcolor="#000000">

<tr><td align="center">

  <div style="text-align:center;"><IMG SRC="<?=$g4[path]?>/images/loadinfo.gif"></div>

  <div style="margin-top:20px; color:#FFF; text-align:center; font-weight:bold;">L o a d i n g . . .</div>

</td></tr>

</table>

</TABLE>    

</div>

<!-- Loading Image -->

<div id="divLoadBody" style="display:none;">

.

.

.

본문내용

.

.

.

</div>

<SCRIPT LANGUAGE="JAVASCRIPT">

var loadingBar = document.getElementById("loadingBar");

var divLoadBody = document.getElementById("divLoadBody");

loadingBar.style.display = "none";

divLoadBody.style.display = "";  

</SCRIPT>

위 코드가 작동하는 방법은 다음과 같습니다.

1. 화면 전체를 검은 배경으로 가린 후 로딩이미지를 출력.
   
2. 본문 내용이 화면에 표시되지 않도록 스타일 지정
   
3. 본문 내용을 모두 불러들인 후 로딩 이미지를 제거하고 본문 내용이 보이도록 스타일 지정
   

마땅한 로딩 이미지가 없을때를 대비해 알아둘 사이트..

http://www.loadinfo.net

http://www.preloaders.net

위 사이트에서 여러 로딩 이미지중 하나를 선택하여 자신이 원하는 색상 크기로 설정 한 후 이미지로 다운받을 수 있습니다.