AJAX로 통신을 할 필요가 생긴 경우 로딩 화면은 필수가 된다.
과거에는 이런 화면을 이미지를 통해서 구현 했지만, HTML5가 나온 뒤로는 그냥 CSS만으로도 로딩 화면 처럼 나오게 할 수 있다.
일단 예제를 보자
<style>
#mloader{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
background-color: #000;
opacity: 0.7;
display:none;
}
#mloader .masterkey_blink {
font-size:20px;
font-weight:bold;
margin: 10% 45%;
-webkit-animation: masterkey_blink 3s linear infinite;
}
@-webkit-keyframes masterkey_blink {
15% { color: white; }
40% { color: black; }
75% { color: white; }
}
</style>
<div id="mloader"><div class="masterkey_blink">LOADING...</div></div>
<div class="col-lg-4">
<input type="button" class="form-control" value="로딩 테스트" onclick="test_loading()">
</div>
<script>
function test_loading()
{
$.ajax({
type: "POST",
url: "/post_inc/ajax_sleep/ajax_sleep.php",
data: "n=1",
beforeSend: function() {
$('#mloader').show();
},
success: function(msg){
//alert( msg );
},
error: function(xhr, option, error){
alert(xhr.status);
alert(error);
},
complete: function(){
$('#mloader').hide();
}
});
}
</script>
간단히 설명하자면, ajax_sleep.php 페이지에는 php함수로 sleep(2)를 두어 통신 지연시간이 발생하게 만들고,
전체 화면을 검게 하고 로딩 메세지가 반짝 거리는 css를 만들어 두고 해당 css를 보였다가 사라지게 하는 것이다.
응용은 알아서 해보길 바란다.