반응형
데이터를 조회하거나 처리할 때 사용자에게 알리기 위해 로딩 이미지를 사용합니다.
사용자에게 알리기 뿐만 아니라 중복으로 action 하지 못하게 하는 용도로도 사용할 수 있습니다.
로딩 이미지의 스타일을 작성합니다. 저는 화면 가운데 고정시켰고, 다른 action을 하지 못하게 z-index 속성을 추가해
맨 앞으로 노출시켜 줬습니다.
loading 변수를 통해 이미지를 숨기고 있다고 필요한 부분에 show를 통해 노출시키면 됩니다.
간단한 예제이니 확인해서 응용하시면 됩니다. (src 경로에 이미지 경로 작성하시면 됩니다.)
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style type="text/css">
#loading {
height: 100%;
left: 0px;
position: fixed;
_position: absolute;
top: 0px;
width: 100%;
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.loading {
background-color: white;
z-index: 999999;
}
#loading_img {
position: absolute;
top: 50%;
left: 50%;
height: 200px;
margin-top: -75px;
margin-left: -75px;
z-index: 999999;
}
</style>
<script type="text/javascript">
var loading = "";
$(function() {
loading = $('<div id="loading" class="loading"></div><img id="loading_img" alt="loading" src="" />').appendTo(document.body).hide();
// 로딩바 적용
loading.show();
//로딩바를 위해 1.5초 뒤 ajax 실행
timer = setTimeout(function(){
jQuery.ajax({
type : "POST",
url : "ajax.php",
data : $("#frm").serialize(),
cache: false,
success : function(data) {
if(data == "0000"){
alert("작업성공");
// 로딩바 해제
loading.hide();
} else{
alert("작업수행에 실패하였습니다.");
// 로딩바 해제
loading.hide();
}
},
error : function(e) {
alert("작업수행에 실패하였습니다.");
// 로딩바 해제
loading.hide();
}, timeout:100000
});
},1500);
});
</script>
<body>
<form method="post" name="frm" id="frm" onsubmit="return false;" autocomplete="off"></form>
</body>반응형
'개발이야기 > jQuery' 카테고리의 다른 글
| [jQuery] getJSON 사용법, 예제 (JSON DATA 가져오기) (0) | 2023.02.25 |
|---|---|
| [jQuery] input enter key event (엔터키 이벤트, keypress) (0) | 2023.01.04 |
| [jQuery] form 초기화(리셋) 사용법 (form clearForm) (1) | 2022.11.22 |
| [jQuery] jqGrid multiselect disabled / checked false 처리 (onSelectAll, loadComplete, onSelectRow) (0) | 2022.11.09 |
| [jQuery] jqGrid tooltip 만들기, 표시하기 (jqgrid tooltip example) (0) | 2022.11.04 |
댓글