[jquery] ajax 통신시 로딩 화면 web



// BODY 에 로딩화면 추가
var loading = $('<div id="loading" class="loading"></div><img id="loading_img" alt="loading" src="/img/loading.gif" />').appendTo(document.body).hide();

// ajax 통신 시작시 실행
$(window).ajaxStart(function() {
loading.show();
});

// ajax 통신 종료시 실행
$(window).ajaxStop(function() {
loading.hide();
});


//CSS

/* 로딩*/
#loading {
height: 100%;
left: 0px;
position: fixed;
_position:absolute; 
top: 0px;
width: 100%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity : 0.5;
}

.loading {
background-color: white;
z-index: 199;
}

#loading_img{
width:150px;
position:absolute; 
top:50%;
left:50%;
height:150px;
margin-top:-75px; // 이미지크기
margin-left:-75px; // 이미지크기
z-index: 200;
}

덧글

  • 오픈 2014/08/12 10:08 # 삭제 답글

    로딩중 화면이 중간에 멈추는데 .. 혹시 방법 아시나요
댓글 입력 영역