ふたりで

javascript+jquery+submit+loading 로딩중 표시 하기 본문

javascript

javascript+jquery+submit+loading 로딩중 표시 하기

graykang 2022. 11. 1. 14:25
728x90
반응형
SMALL

1. submit 하는 경우 아래와 같이 처리.

 기본적으로 로딩 중이 표시되도록 하고 화면이 ready 가되면. hide() 시켜준다.

추가로 검색을 submit으로 처리 할경우 아래와 같이 form태그에 onsubmit="return inpValidateFn();" 속성을 주어 해당 속성에 걸린 기능이 true를 반환 할 때만 로딩 중 ui를. show() 해주면 된다.

 
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous"></script>
  <style>
    /*로딩이미지*/
    .wrap-loading {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: #fff;
      opacity: 0.9;
      z-index: 9999;
    }
    .wrap-loading div {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 200px;
      margin-left: -100px;
      margin-top: -130px;
      text-align: center;
    }
    .wrap-loading div img {
      display: block;
      margin: 0 auto 5px;
    }
    .wrap-loading div p {
      text-align: center;
    }
    .wrap-loading div b {
      font-size: 18px;
    }
    .display-none {
      display: none;
    }
    .warp_pagination {
      text-align: center;
    }
  </style>
</head>
<body>
<form class="flex" onsubmit="return inpValidateFn();" id="formflex" action="${ctx }/front/searchGoodsList">
    <div style="border-radius: 20px 20px;">
        <input type="search" placeholder="검색어를 입력해 주세요" class="globalsearch__tf js_searchword_inp" id="searchKeyword" name="searchKeyword" autocomplete="off" style="border-radius: 20px 20px;" value="${searchParams.searchKeyword}">
        <button type="submit">
            <span class="icon-search"></span>
        </button>
	</div>
</form>

<!-- 	로딩 -->
	<div class="wrap-loading">
		<div>
			<img style="width: 25rem;" alt="" src="https://media2.giphy.com/media/ZO9b1ntYVJmjZlsWlm/giphy.gif?cid=ecf05e47e7vbjc78wv2xxky7x01vqz6fnbrzqugdbznnni9c&rid=giphy.gif&ct=g">
		</div>
	</div>
<script>
$(document).ready(function(){
	//화면 준비되면 로딩이미지 숨기기
	$('.wrap-loading').hide();	
});
//검색어가 없을경우 false
function inpValidateFn(){
	var searchkeyword = $('#searchKeyword').val().trim();
	if(searchkeyword.length == 0){
		return false;
	}else{
    	//검색어가 있을경우 로딩중 표시
		$('.wrap-loading').show();
		return true;
	}
}

</script>
</body>
</html>
728x90
반응형
LIST
저작자표시

'javascript' 카테고리의 다른 글

jquery progressbar by button event(버튼에 의한 진행율 표시)  (0) 2022.11.08
jquery+ checkbox selected control by radio button+ 라디오 버튼에 의한 체크박스 컨트롤 하기  (0) 2022.11.04
jquery+javascript 전화번호 자동완성 및 유효성검사  (0) 2022.10.28
moden javascript attribute data get set (선택요소의 data값 가져오기, 수정하기 moden javascript방법)  (0) 2022.10.27
jquery 선택요소의 Data 값 가져오기, 수정하기  (0) 2022.10.26
'javascript' Related Articles more
Comments