2016-07-19
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를 보였다가 사라지게 하는 것이다.
응용은 알아서 해보길 바란다.