[Javascript] 로딩(Loading)바 만들기(Submit, Ajax)

안녕하세요. 따시 입니다.

웹페이지를 제작 할때에 로딩바 출력을 만들려고 합니다.

프로젝트 할때에 화면 조회시 페이지를 만들때에 대부분 두가지로 나누어 지는데요

Ajax로 호출하여 화면에 뿌려줄때에 와 Submit 시켜서 화면을 조회 할 수 가 있습니다.

이:때에 Ajax 할때에는 로딩바 만들기는 수월하나

Submit으로 조회 화면을 만들때에는 로딩바를 어떻게 해야할지 고민을 하였습니다.

이미 다 만들어 놓았는데, 클라이언트가 로딩바를 넣어달라는 요청에 고민이 되었죠.

제가 사용할 로딩바 이미지는 아래와 같습니다.

● Submit으로 로딩바 호출방법

<body>
  <div id="div_load_image" style="position:absolute; top:50%; left:50%;width:0px;height:0px; z-index:9999; background:#f0f0f0; filter:alpha(opacity=50); opacity:alpha*0.5; margin:auto; padding:0; text-align:center">
      <img src="/images/common/loading.gif" style="width:100px; height:100px;">
  </div>
  
  .
  .
  .
 </body>

Body 상단에 div 영역을 넣어줍니다. 이미지 경로는 프로젝트 경로에 맞게 수정해야겠죠

이렇게 할 경우에 화면에 접속하면 로딩바가 계속 돌고 있습니다.

<script>
	window.onload = function () {
	   $("#div_load_image").hide();
   	}

	.
	.
	.
	.
    
</script>

이제 <script> 에서 windows.onload 쪽에 $("#div_load_image").hide(); 을 넣어줍니다.

이렇게 하면 html이 다 브라우저에 뿌려진 후에 해당 div를 hide 시켜버립니다.

그러면 화면 조회후 로딩바는 사라지게 되지요

<script>
	function search(){
		$("#div_load_image").show();
		$("#searchForm").attr("method", "POST");
		$("#searchForm").attr("action", "/test");
		$("#searchForm").submit()
	}
<script>

마지막으로 조회 하면 function을 호출하는 곳에 $("#div_load_image").show(); 을 넣어주면 됩니다.

● Ajax 로 로딩바 호출방법

<script>
	function callAjax(test, test2){
		var sendData;
		sendData = JSON.stringify({
			"test" : test,
			"test2": test2
		});
		
		$("#div_load_image").show();

		$.ajax({
			type 		: 	'POST',
			url			:	"/test",
			contentType: 	"application/json;charset=UTF-8",
			data 		:	sendData,
			dataType	: 	'json',
			success		:	function(data){
				// 조회성공
				$("#div_load_image").hidden();
			},
			error: function(jqXHR, textStatus, errorThrown){
				alert("오류가 발생하였습니다.");
				$("#div_load_image").hidden();
		   }
		});

	}
</script>

호출전에 show() 함수로 노출 후 success 또는 error 일때에 hidden() 처리하면 됩니다.

저작자표시 비영리 변경금지

'개발경험 및 메모 > Javascript & JQuery' 카테고리의 다른 글

div ul li 높이 똑같이 적용하기. (0)	2022.09.14
Javascript history.back 체크 이슈 (0)	2022.07.13
[Javascript] 배열 관련 메서드 - push(), pop(), join() (0)	2020.06.26