페이지 처리&로딩 중 로딩이미지 보이기(잡Ver)

클라이언트 쪽에서 처리를 요청해서 서버가 열심히 돌아가는 동안, 그대로 두면 페이지가 정지된 것 처럼 보이게 되고 이용자가 다른 버튼 누르거나 닫아버리면 대략 난감한 상황이 벌어진다.그래서 보통은 AJAX로 비동기 통신을 하고 그 사이에 로딩이미지를 보여주거나 한다던데...모르겠고!!예제를 찾아보니 브라우저 로딩시에 .onload 나 .ready로 이미지를 표시한 것이 많은데 이건 처리 중에는 이미지 표시가 안 되고 브라우저 밑에 상태바에 처리 중이라고 뜨니까..결국 반쪽짜리.고민하다가 Submit해서 처리하는 사이에 로딩이미지를 보여주고, 처리 후 페이지 로딩할 때  로딩이미지를 페이드아웃 시키는 방법으로 어찌 해결했다. 난잡한 방법이지만 굳이 비동기 통신 등 사용 안 하고도 동기 페이지에서 처리시 로딩이미지를 보여줄 때 써 먹으면 되지 않을까?? ㅎㅎ 

우선 css 파일 내용임..커다란 박스 하나 표시하고 그 위에 로딩 이미지 올릴 레이어 만듦.

<style type="text/css"> #loader-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #000; opacity:0.2; z-index: 1; } #loader { display: none; position: fixed; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; text-align: center; color: #fff; z-index: 2; } </style>

HTML 에는 로딩 이미지가 보일 영역을 설정하고 폼 전송 버튼 등을 만든다.

// HTML 파일 // 로딩 이미지를 표시할 부분 <div id="loader-bg"> <div id="loader"> <img src="img/img-loading.gif" width="80" height="80" alt="Now Loading..." /> <p>Now Loading...</p> </div> </div> // 로딩 후 보여질 부분, 즉 본문 <div id="wrap"> <?php echo $this->Form->postButton( '마스터 정보 복사', ['controller' => 'Masters','action' => 'index'], ['class' => 'btn btn-primary btn-sm', 'onclick' => ''] ); ?> </div>

스크립트 부분에 JQuery 로 이벤트를 두 가지 만들어 둔다. submit 과 ready (또는 load)

<script> $(window).on('submit',function () { // 처리 중 이미지를 표시 var h = $(window).height(); $('#loader-bg ,#loader').height(h).css('display','block'); $('#wrap').css('display', 'none'); }); $(window).on('ready',function () { // 처리 후 로딩시, 이미지 페이드아웃 시킴 $('#loader-bg').delay(900).fadeOut(800); $('#loader').delay(600).fadeOut(300); $('#wrap').css('display', 'block'); }); </script>