[JQuery] ajax호출시 간단한 대기창 호출

 

(function ($) {

 

$(document).ready(function () {

 $("<div id='viewLoading'></div>")    

// 아래엔 대기 표시 이미지 경로를 표시하면 될 것 같습니다.

 .append("<img src='../../Content/Picture/LoadingProgress.gif' /></br>"

.append("<span style='font-color:red;'>잠시만 기다려 주십시오</span>")

 .appendTo("body")

 .hide();

 

$("#viewLoading").bind("ajaxStart", function () {

$(this).show();

}).bind("ajaxComplete", function () {

$(this).hide();

});

 

});

 

 

})(jQuery);

 

 

 

JS 파일에 위 스크립트를 삽입하여

 

html 페이지에서는 해당 파일을 embed 하엿습니다!!

 

<script src ="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/AjaxProgress.js") %>" type="text/javascript"></script>  

 

 

 이렇게 하니 $.ajax 호출시에 대기창이 표시되었다 사라지네요!!

 

조금이라도 도움되셨으면 좋겠습니다!!