AJAX event 순서가 https://api.jquery.com/Ajax_Events/ 와 같으니
$(document).ready(function() {
// loading image <body>에 추가
$('img')
.attr("id", "loading")
.attr("src", "resources/images/loading_image.gif")
.css("position", "absolute")
.css("left", "47%") // 50%로하고 margin-xxx값 넣거나 걍 left,top값 적당 비율로 넣기
.css("top", "47%") // body,screen,window 등 기준에 따라서 중간 위치값이 달라질듯
//.css("margin-left", "-17px") // [image width / 2]
//.css("margin-top", "-17px") // [image width / 2]
.css("display", "none")
.fadeTo(0, 0.7) // for opacity filter
.appendTo("body");
});
모든 ajax에 적용 시
$(document).ajaxSend(function() {
$("#loading").show();
});
$( document ).ajaxComplete(function() {
$( "#loading" ).hide();
});
특정 ajax만 적용 시
// 서버 목록 조회 후 tab 추가
$.ajax({
url: "server/list",
beforeSend : function () {
$("#loading").show();
},
complete : function() {
$( "#loading" ).hide();
},
});
AJAX event 순서
- ajaxStart (Global Event)
This event is triggered if an Ajax request is started and no other Ajax requests are currently running.- beforeSend (Local Event)
This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.) - ajaxSend (Global Event)
This global event is also triggered before the request is run. - success (Local Event)
This event is only called if the request was successful (no errors from the server, no errors with the data). - ajaxSuccess (Global Event)
This event is also only called if the request was successful. - error (Local Event)
This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request). - ajaxError (Global Event)
This global event behaves the same as the local error event. - complete (Local Event)
This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests. - ajaxComplete (Global Event)
This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
- beforeSend (Local Event)
- ajaxStop (Global Event)
This global event is triggered if there are no more Ajax requests being processed.
