[jQuery] AJAX 통신 시 로딩 스피너 표시하기

1. 이미지 추가 및 스타일 설정

<style>
#loadingImage {
    display: none; /* 평소에는 gif가 보이지 않음 */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('gif경로') 50% 50% no-repeat rgb(249, 249, 249);
    opacity: 0.7;
}
</style>

<div class="loadingImage" id="loadingImage"></div>

 

2. ajax 통신 코드

  - 통신 중에는 로딩 스피너가 표시되고, 통신이 끝나면 로딩 스피너가 사라짐

$("요소").on("click", function() {
		
    // 가장 위 (로딩 스피너 표시)
    $("#loadingImage").show();
    // ...

    $.ajax({
        type : "post",
        url : ajaxurl,
        ...

    }).done((res) => {
        // 통신 성공 시

        // 가장 아래 (로딩 스피너 숨김)
        $("#loadingImage").hide();

    }).fail((error) => {
        // 통신 실패 시

        // 가장 아래 (로딩 스피너 숨김)
        $("#loadingImage").hide();
        
    });
}

 

 

---