jQuery 를 이용하여, AJAX 를 호출하는경우, 이미지를 표시하는 방법이다.
$.ajax 를 이용하여, 데이터를 불러오거나, 데이터를 저장할때,
작업시간이 많이 걸리는 경우에는, 로딩중임을 표시하는 이미지가 화면에 나타나도록 해준다.
여기서 사용한, 로딩이미지는 위의 이미지로, 마우스 오른쪽 버튼을 눌러서, 저장하여 사용해도 된다.
|
$.ajax({
type: "POST"
, contentType: "application/x-www-form-urlencoded"
, url: "http://bemeal2.tistory.com/media/data"
, data: "onLoad=%5Btype%20Function%5D&count=15&page=1"
, async: true
, error: function (res) {
console.log("ajax error - " + res);
}
, success: function (res) {
console.log("ajax success - " + res);
}
, 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>');
}
}
, complete: function () {
$("#div_ajax_load_image").hide();
}
}); |
다른 코드는 기존 사용하던거 그대로 놓고, 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 을 한번만 구현해 놓으면, 위의 코드를 매번 작성하지 않아도 된다.
|
$.ajaxSetup({
... // 이 안에, beforeSend, complete. error 를 붙여넣으면 된다.
)}; |
