Html & Script

자바스크립트로 페이지 로딩표시 만들기

작성자 정보

컨텐츠 정보

본문

제 목 | 자바스크립트 > 자바스크립트로 페이지 로딩표시 만들기
날 짜 | 05-08-09 09:24 (아르헨티나 기준시간)
조 회 | 228
페이지 로딩시 자바스크립트를 이용하여 로딩표시를 만들 수 있습니다. 여기 예제에서는 텍스트를 이
용하였지만, 이미지를 만들어 사용한다면 플래시와 같은 효과를 볼 수 있겠죠?

1. 아래의 소스를 <HEAD>와 </HEAD> 사이에 넣습니다.
<script language="JavaScript">
<!--
function loading()
{
document.all.preview.style.display = "none";
document.all.show.style.display = "";
}
//-->
</script>



2. 아래 예제처럼 onload="loading();" 태그를 <BODY> 안에 넣습니다.
-------------------------------------------------------------------
<BODY onload="loading();">
-------------------------------------------------------------------


3. 태그 적용하기 : 아래의 소스를 <BODY>와 </BODY> 사이 맨위에 넣습니다.
<div id="preview">now!! Loading.....</div><div id="show" style="display:none">
<!-- 여기부터 로딩될 부분 넣기 -->
.
.
.
.
.내용부분
.
.
.
.
.



<BODY>와 </BODY> 주요부분 설명
-------------------------------------------------------------------
만약! 이미지로 로딩표시를 이쁘게 만드실 분은 빨간색 부분의 'now!! Loading.....' 부분을 삭제 하
시고 대신 <img src="이미지경로"> 태그를 넣습니다.

<!-- 여기부터 로딩될 부분 넣기 --> 이 부분의 파란색 부분으로 표시된 아랫 부분부터 내용을 넣
어 주셔야 페이지 로딩표시 자바스크립트가 적용됩니다.
-------------------------------------------------------------------

[출처] 자바스크립트로 페이지 로딩표시 만들기|작성자 화니

관련자료

댓글 0
등록된 댓글이 없습니다.
목록
Today's proverb
지금이 바로 새 출발점. 인생이란 하루하루가 훈련이다. 우리 자신을 훈련하는 터전이다. 실패도 할 수 있는 훈련장이다. 살아있음이 흥겨운 훈련장이다. 지금 이 행복을 기뻐하지 않고 언제 어디서 행복해지랴. 이 기쁨을 발판삼아 온 힘으로 나아가자. 나의 미래는 지금 이 순간 이 곳에 있다. 지금 여기서 노력하지 않고, 언제 어디서 노력하랴. (오히라 미쓰요의 <그러니까 당신도 살아> 중에서)