페이지 로딩 시 에니메이션 띄우는 예제

html

로딩 화면과 로딩 후 표시할 화면을 만들어 놓음.

1 2 3 4 5 6 7 8 9

<div id="loader-bg">   <div id="loader">     <img src="img-loading.gif" width="80" height="80" alt="Now Loading..." />     <p>Now Loading...</p>   </div> </div> <div id="wrap">   로딩 후 표시할 내용 </div>

CSS

CSS에서는 로딩화면의 디자인을 정하고 초기설정을 비표시로 설정함.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

#loader-bg {   display: none;   position: fixed;   width: 100%;   height: 100%;   top: 0px;   left: 0px;   background: #000;   z-index: 1; } #loader {   display: none;   position: fixed;   top: 50%;   left: 50%;   width: 200px;   height: 200px;   margin-top: -100px;   margin-left: -100px;   text-align: center;   color: #fff;   z-index: 2; }

jQuery

3～8행에서 CSS에서 비표시로 설정한 화면의 윈도우의 높이를 설정해서 표시하게 함.
10～14행에서 페이지가 로드 되었을 때 로딩화면을 페이드아웃 시킨 후 원래 화면을 표시함.

혹시 페이지 안에서 장시간 처리가 안 끝나 계속 로딩화면이 뜨는 경우가 있는데 10초가 지나면 강제로 로딩화면을 비표시로 전환하는 코드가 17-19행에 들어있음. 없어도 정상적으로 작동하니 필요없으면 지워도 상관없음.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function() {   var h = $(window).height();   $('#wrap').css('display','none');   $('#loader-bg ,#loader').height(h).css('display','block'); }); $(window).load(function () { //全ての読み込みが完了したら実行   $('#loader-bg').delay(900).fadeOut(800);   $('#loader').delay(600).fadeOut(300);   $('#wrap').css('display', 'block'); }); //10秒たったら強制的にロード画面を非表示 $(function(){   setTimeout('stopload()',10000); }); function stopload(){   $('#wrap').css('display','block');   $('#loader-bg').delay(900).fadeOut(800);   $('#loader').delay(600).fadeOut(300); } </script>