ajax - 통신 중 로딩 이미지 출력

코드

js

function lodingSign() {
    // 로딩 이미지 div
    var loading_div = `<div id='loading_div'>
                        <img src='loding.gif' id="loading_img"/>
                    </div>`;

    $('body').append(loading_div);
    // 마우스 커서 로딩 중으로 변경
    $('html').css("cursor", "wait");
    // ajax 함수 실행 버튼 클릭 이벤트 차단
    $('button').attr('onclick', 'return false;');
}

function lodingImgHide() {
    // 마우스 커서 기본값으로 변경
    $('html').css("cursor", "auto");
    // ajax 함수 실행 버튼 클릭 이벤트 차단 해제
    $('button').attr('onclick', '함수이름()');
    // 로딩 이미지 삭제
    $('#loading_div').remove();
}

// 기본 ajax 함수
function 함수이름() {
    // 로딩 이미지 출력
    lodingImgShow();
    var Params = {};
    $.ajax({
        url: "/url",
        type: 'POST',
        data: Params,
        datatype: 'json',
        // ajax 통신 성공 시
        success: function (result) {
            switch (result.status) {
                case 'complete':
                    console.log('성공 시');
                    break;
                case 'fail':
                    console.log('실패 시');
                    break;
                default:
                    console.log('예외 발생 시');
                    break;
            }
        },
        // ajax 통신 중 에러 발생 시
        error: function (request, status, error) {
            // 에러 출력
            console.error("code:" + request.status + "\n" + "message:" + request.responseText + "\n" + "error:" + error + "\n" + "request:" + request);
        },
        // ajax 통신 종료 시 
        complete: function () {
            // 로딩 이미지 종료
            lodingImgHide();
        }
    });
}

---

css

#loading_div {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #000;
    opacity: 0.5;
}

#loading_img {
    width: 40px;
    position: relative;
    display: block;
    margin: 0px auto;
}

---

로딩 중 gif