반응형
이번글은 웹사이트나 홈페이지에서 이미지나 CSS, JavaScript 등을 전송받을때 로딩중 이미지를 띄우는 방법입니다. 아주 간단하게 자바스크립트와 CSS로만 만들어서 메인페이지나 쓰고자 하는 페이지에 간단히 복사 붙여넣기로 적용만 시키면 됩니다.
■ 로딩 이미지 만들기
여러가지 로딩 이미지를 제공합니다.
쉽고 간단한 로딩 이미지를 만들 수 있습니다.
■ 로딩 소스
위에서 로딩이미지를 생성하셨다면 다음은 소스를 입혀줄 차례입니다.
먼저 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 통신을 할때 로딩중 이미지를 보여주고, 모든 응답이 끝나면 사라집니다. 끝~~!!
반응형
'프로그래밍 > Script·JQuery' 카테고리의 다른 글
| Javascript〃자바스크립트 용량 및 코드 줄이기 (BTCode) (0) | 2017.01.24 |
|---|---|
| Javascript〃자바스크립트 팝업창 1일동안 띄우지 않기 (0) | 2017.01.23 |
| Javascript〃자바스크립트로 현재시간 나타내기 (0) | 2017.01.20 |
| Jquery&CSS〃하루동안 팝업 열지 않기 소스 (0) | 2016.12.09 |
| JQuery〃에이작스(AJAX) 동작원리, 설정, 비동기 요청함수 (0) | 2015.12.14 |