[JS] 자바스크립트 로딩 이미지 띄우기

로딩 이미지

데이터를 처리할 때 화면에 로딩 이미지를 띄워봅시다.

 

1. 로딩 관련 style 태그 

<style>
#loading {
 width: 100%;  
 height: 100%;  
 top: 0px;
 left: 0px;
 position: fixed;  
 display: block;  
 opacity: 0.7;  
 background-color: #fff;  
 z-index: 99;  
 display: none;
 text-align: center; } 
  
#loading-image {  
 position: absolute;  
 top: 30%;  
 left: 40%; 
 z-index: 100; }
</style>

 

WEB 화면에 로딩 이미지를 이쁘게 띄우기 위해 로딩 이미지에 대한 style 태그를 정의합니다.

 

$(document).keyup(function(e) {
    if (e.keyCode == 27) { // escape key maps to keycode `27`
    	$('#loading').hide();   
   }
});

사용자의 키보드에서 값을 받는 keyup 이벤트를 사용합니다.

e.keyCode == 27 은 사용자에게 esc 값을 받을 때의 조건입니다.

esc 값을 받으면 로딩 이미지를 숨깁니다. 

 

$('#btnSearch').click(function() {
	$('#loading').show();   
	$('#page').val('1');		
	$('#frmSearch').submit();
});
-------------------------------------------------
<a id="btnSearch">검색</a>

btnSearch를 누를경우 로딩 이미지를 보여주고 form 태그와 함께 submit합니다.

submit에 대한 프로세스를 처리하는 동안 로딩 이미지를 보여줍니다.