Javascript&CSS〃웹사이트 로딩중 이미지 띄우기

HUN IT Blog 2017. 2. 2. 11:22

이번글은 웹사이트나 홈페이지에서 이미지나 CSS, JavaScript 등을 전송받을때 로딩중 이미지를 띄우는 방법입니다. 아주 간단하게 자바스크립트와 CSS로만 만들어서 메인페이지나 쓰고자 하는 페이지에 간단히 복사 붙여넣기로 적용만 시키면 됩니다.

■ 로딩 이미지 만들기

1. http://preloaders.net/

여러가지 로딩 이미지를 제공합니다.

2. http://www.ajaxload.info/

쉽고 간단한 로딩 이미지를 만들 수 있습니다.

■ 로딩 소스

위에서 로딩이미지를 생성하셨다면 다음은 소스를 입혀줄 차례입니다.

먼저 CSS소스

<style>
#loading {
 width: 100%;   
 height: 100%;   
 top: 0px;
 left: 0px;
 position: fixed;   
 display: block;   
 opacity: 0.7;   
 background-color: #fff;   
 z-index: 99;   
 text-align: center; }  
 
#loading-image {   
 position: absolute;   
 top: 50%;   
 left: 50%;  
 z-index: 100; } 
</style>

다음은 SCRIPT 소스

<script type="text/javascript">
$(window).load(function() {     
	 $('#loading').hide();   
	}); 
</script>

마지막으로 HTML or JSP <BODY></BODY>안에 들어가는 소스

<div id="loading"><img id="loading-image" src="/images/loading.gif" alt="Loading..." /></div>

이정도면 이미지나 AJAX 통신을 할때 로딩중 이미지를 보여주고, 모든 응답이 끝나면 사라집니다. 끝~~!!

저작자표시 비영리 변경금지 (새창열림)