로딩이미지 보여주기, show loading image, HTML5,로딩애니메이션

 

로딩이미지는 대량의 데이터를 보여줄때 많이 사용하게 되는데요, 

 

 

지난 시간에는 AJAX 통신할때 loading 문구를 보여주는 걸 알아봤습니다만, 

 

 

 

 

 

이번에는 HTML 문서내에 데이터가 많을경우에 사용할 수 있는 간단한 로딩 이미지 보여주는 방법을 알려드립니다

 

 

 

 

페이지가 로딩될때 위와같은 로딩 이미지를 보여주고자 할 경우, 다음과 같이 사용하시면 됩니다

 

 

<div align="center" id="loading_image " style="width:100%; height100%; text-align:center; font-size:12pt; color:red; font-weight:bold; padding-top:100px;">

<img src="loading.gif"><br>

Loading ...

</div>

 

일단, 위와 같이 로딩 이미지를 <div> 태그내에 위치시키고 아이디를 loading_image 라구 명명합니다

 

그리고, 페이지 하단부분에 아래와 같이 코드를 넣어주면 됩니다

이렇게 하면, 페이지 로딩이 모두 완료된 이후에 로딩바가 사라지게됩니다

 

<script language="javascript">

document.all.loadingBar.style.display='none';

</script>