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>
$(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');
});
$(function(){
setTimeout('stopload()',10000);
});
function stopload(){
$('#wrap').css('display','block');
$('#loader-bg').delay(900).fadeOut(800);
$('#loader').delay(600).fadeOut(300);
}
</script>
|
댓글
댓글 쓰기