화면전환/Ajax실행 시 Loading Image 표시

필요 js

<script src="/js/jquery/jquery.blockUI.js"></script>

----------------------------------------------------------------------------------------------------------------

공통 js 정의

$(function() {

$(window).ajaxStart($.blockUI).ajaxStop($.unblockUI);

$.blockUI.defaults.css = {

padding:        0, 

        margin:         0, 

        width:          '30%', 

        top:            '40%', 

        left:           '35%', 

        textAlign:      'center', 

        color:          '#000', 

        cursor:         'wait' 

};

$.blockUI.defaults.overlayCSS =  { 

backgroundColor: '#000', 

opacity:         0.1, 

cursor:          'wait' 

}

//$.blockUI.defaults.showOverlay = false;

$.blockUI.defaults.message = "<img src='images/loading.gif' >";

})

/*--------------------------------------------------

기능   : 특정 부분에 로딩중 이미지 표출

INPUT  :

    panelID : 로딩중 이미지가 있는 LayerID

    targetID: 특정 부분 LayerID

    state   : true / false ( 시작 / 종료)

    v       : 속도(기본값 : 500)

RETURN : null

----------------------------------------------------*/

function loadingImg(panelID, targetID, state, v) {

    if (v === undefined) v = 500;

    switch (state) {

        case true:

            var padingTop = (jQuery('#' + targetID).height() / 2) - 20;

            var padingLeft = (jQuery('#' + targetID).width() / 2) - 20;

            //통신을 시작할때 처리

            jQuery('#' + panelID + " #loadingImg").css({

                'position': 'relative',

                'left': padingLeft + "px",

                'top': padingTop + "px"

            });

            jQuery('#' + panelID).css({

                'position': 'absolute',

                'left': jQuery('#' + targetID).offset().left + "px",

                'top': jQuery('#' + targetID).offset().top + "px",

                'width': jQuery('#' + targetID).width() + "px",

                'height': jQuery('#' + targetID).height() + "px"

            }).fadeIn(v);

            break;

        case false:

            jQuery('#' + panelID).fadeOut(v);

            break;

    }

}

----------------------------------------------------------------------------------------------------------------

ajax 요청 시

beforeSend : function() { // 통신을 시작할때 처리

if ($(".wrap-loading").length <= 0) {

var loadingImg = $("<div class=\"wrap-loading\"><div id=\"loadingImg\"><img src=\"/images/loading.gif\" /></div></div>");

loadingImg.appendTo("body");

}

var deviceSize = 2;

$("#loadingImg").width("100px");

$("#loadingImg").height("100px");

$("#loadingImg").css(

{

position : "absolute",

top : $(document).scrollTop()

+ ($(window).height()) / 2.6 + 'px',

left : ($(window).width()) / deviceSize + 'px'

});

$(".wrap-loading").show();

},

complete : function() { // 통신이 완료된 후 처리

$(".wrap-loading").hide();

}