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

작업 소스들

TheStorybook 2020. 6. 16. 22:46

이번글은 웹사이트나 홈페이지에서 이미지나 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 소스

$(window).load(function() {

$('#loading').hide();

});

</script>

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

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

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