-
[JQuery] 버튼 클릭 후 웹 페이지 로딩 시 로딩이미지 띄우기web 2018. 5. 27. 16:03
JQuery : 페이지 로드 후 로딩이미지 감춰놓기. & 버튼 클릭 시 로딩이미지 띄우기
<script>
$(document).ready(function() {
$('#loading').hide();
$('#next').submit(function(){
$('#loading').show();
return true;
});
});
</script>
HTML : 로딩이미지 & submit버튼을 포함한 form
<div id="loading">
<img src="loading.gif" alt="loading">
</div>
<form action="next" method="post" id="next">
<input type="hidden" value="test" name="test">
<input type="submit" value="submit">
</form>
css : 로딩이미지 전체화면 및 투명도
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8;
background: white;
z-index: 99;
text-align: center;
}
#loading > img {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;
}
'web' 카테고리의 다른 글
[html]textarea 태그 placeholder 줄바꿈 입력하기 (0) 2018.05.27 [JavaScript / JQuery] <textarea> 값 중 엔터값 줄바꿈 처리하기 (0) 2018.05.27