헝그리개발자

jQuery 를 이용하여, AJAX 를 호출하는경우, 이미지를 표시하는 방법이다.

$.ajax 를 이용하여, 데이터를 불러오거나, 데이터를 저장할때,

작업시간이 많이 걸리는 경우에는, 로딩중임을 표시하는 이미지가 화면에 나타나도록 해준다.

여기서 사용한, 로딩이미지는 위의 이미지로, 마우스 오른쪽 버튼을 눌러서, 저장하여 사용해도 된다.

다른 코드는 기존 사용하던거 그대로 놓고, beforeSend 와 complete 만 가져가서 사용하면 된다.

beforeSend 는 AJAX 요청하기 전에 실행되며, complete 는 AJAX 응답이 완료되면, 오류던지 성공이던지 상관없이 호출이 된다.

 , beforeSend: function () {
              var width = 0;
              var height = 0;
              var left = 0;
              var top = 0;

              width = 50;
              height = 50;
              top = ( $(window).height() - height ) / 2 + $(window).scrollTop();
              left = ( $(window).width() - width ) / 2 + $(window).scrollLeft();

              if($("#div_ajax_load_image").length != 0) {
                     $("#div_ajax_load_image").css({
                            "top": top+"px",
                            "left": left+"px"
                     });
                     $("#div_ajax_load_image").show();
              }
              else {
                     $('body').append('<div id="div_ajax_load_image" style="position:absolute; top:' + top + 'px; left:' + left + 'px; width:' + width + 'px; height:' + height + 'px; z-index:9999; background:#f0f0f0; filter:alpha(opacity=50); opacity:alpha*0.5; margin:auto; padding:0; "><img src="file://D:\\temp\\ajax_loader.gif" style="width:50px; height:50px;"></div>');
              }

       }

img 태그의 src 속성은 실제 웹서버의 URL 로 변경해야한다.

로딩 이미지를 화면의 정 중앙에 보여주는 코드이다.

       , complete: function () {
                     $("#div_ajax_load_image").hide();
       }

AJAX가 완료되면, 로딩 이미지를 숨긴다. 이는 다음번 AJAX 호출이 될때 그대로 재사용하여, show() 메서드로 보여줄 수 있기에 감추기만 한 것이다.

실제 위 코드로 실행한 예이다.

하지만, $.ajax 를 작성시마다, 매번 위 코드를 복사해서 붙여넣기하는것은, 좋지 않은 방법인다.

common.js 파일을 만들어서, $.ajaxSetup 을 한번만 구현해 놓으면, 위의 코드를 매번 작성하지 않아도 된다.