페이지의 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>
위 코드가 작동하는 방법은 다음과 같습니다.
- 화면 전체를 검은 배경으로 가린 후 로딩이미지를 출력.
- 본문 내용이 화면에 표시되지 않도록 스타일 지정
- 본문 내용을 모두 불러들인 후 로딩 이미지를 제거하고 본문 내용이 보이도록 스타일 지정
마땅한 로딩 이미지가 없을때를 대비해 알아둘 사이트..
위 사이트에서 여러 로딩 이미지중 하나를 선택하여 자신이 원하는 색상 크기로 설정 한 후 이미지로 다운받을 수 있습니다.
