ajax 로딩 이미지 출력

ajax 호출 시 로딩이미지를 출력하는 코드이다.

내가 주로 쓰는 방법은 ajax 호출 시 아래와 같은 gif 이미지를 화면 가운데에 출력하고, 작업이 끝나면 이미지를 지우는 간단한 코딩이다.

function getBoardList() {
    
    var loadingHtml = '<div id="loading" style="z-index: 1005;position: absolute; top:50%;left:50%; text-align:center;"> ';
    loadingHtml += '<div class="loading_box"><img src="<c:url value="/resources/backoffice/img/load-root.gif"/>"  /></div></div>';
 
    $('body').fadeTo( "fast", 0.4 ).append(loadingHtml);
 
    $.ajax({
        ...
    }, success : function(datas) {
        
        $('body').fadeTo( "slow", 1 ).find('#loading').remove();
 
        ...
 
    });
}

위 소스를 그대로 사용하려면 /resources/backoffice/img 폴더 밑에 load-root.gif 라는 이름의 로딩 이미지가 필요하다. 

(위에 빙글빙글 돌아가는 이미지를 '다른 이름으로 저장' 하고 경로에 잘 넣어주면 바로 확인이 가능하다.)