[JavaScript] Ajax 옵션 beforeSend 를 이용한 Loading 만들기

개발/JavaScript

[JavaScript] Ajax 옵션 beforeSend 를 이용한 Loading 만들기

코딩하는 흰둥이 2025. 5. 5. 14:52

Loading gif 아이콘, 로고, 기호 – PNG, SVG 무료 다운로드

웹, 모바일, 그래픽 디자인 프로젝트를 위한 여러 디자인 스타일의 iOS, Material, Windows의 Loading gif 아이콘을 무료로 받아보세요. 무료 이미지들은 픽셀 단위로 정교하며, PNG 및 벡터로 제공되어 어

icons8.kr

위의 사이트에서 gif 를 다운로드하였다

https://greed-yb.tistory.com/253

[SpringBoot] 외부 파일 불러오기

기본적으로 /resources/static/ 폴더 안에 파일을 읽어오지만그 외의 외부폴더에서 파일을 참조할 경우 보안상의 문제로 파일을 불러오지 않는다 파일이 동적으로 생성되거나 관리가 되어야 하는

greed-yb.tistory.com

파일 경로는 현재 프로젝트 구성에 의해 이전글처럼 참조하고 있으니 참고할 것

(Security 같은 구성이 아니면 절대 또는 상대 경로로 바로 인식할 것이다)

HTML + CSS + JavaScript

<style>
	#loading{
            height: 100%;
            left: 0px;
            position: fixed;
            _position: absolute; /* _position: absolute;는 IE6 이하에서만 적용되게 하기 위한 방법 */
            top: 0px;
            width: 100%;
            filter: alpha(pacity=50);
            -moz-opacity: 0.5;
            opacity: 0.5;
        }

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

        #loadingImage{
            position: absolute;
            top: 50%;
            left: 50%;
            hegiht: 35px;
            margin-top: -75px;
            margin-left: -75px;
            z-index: 200;
        }

</style>

<body>
    <div id="loading" class="loading" style="display:none">
    	<img id="loadingImage" alt="loading" style="width:100px !important; height:100px !important;" src="/uploadPath/image/icons8.gif" />
    </div>
    
    <div>
    	<button type="button" onclick="loadingBtn()">테스트 버튼</button>
    </div>
</body>



<script>
function loadingBtn(){

    let loadingShow = false;

    $.ajax({
        url: "/loadingTest",
        type: "GET",
        beforeSend: function(e) {
            if (!loadingShow) {
                $('.loading').show();
            }
        },
        success: function(e) {
            alert(e);
        },
        error: function(e) {
            alert(e);
        },
        complete: function(e) {
            if (!loadingShow) {
                $('.loading').hide();
                loadingShow = false;
            }
        }

    });
}
</script>

TestController

    // loading 테스트 용
    @GetMapping("/loadingTest")
    @ResponseBody
    public String loadingTest() throws Exception{
        System.err.println("loadingTest~~~!!!!");

        try {
            Thread.sleep(5000); //5초 대기
            return "성공";
        } catch (InterruptedException e) {
            e.printStackTrace();
            return "실패";
        }
    }

sleep 한 시간에 따라 Loading 도 오래 걸린다

TEST

Loading 이미지가 중앙이 아닌 이유는

왼쪽에 메뉴바가 있는데 캡처에 포함이 되지 않아서 그렇다

예전에 Laoding 페이지를 구현할 때는 ajax 가 실행되기 전에

Loading Layout 을 호출하고 끝나면 display 처리를 방식을 사용하였는데

beforeSend 라는 옵션을 사용하니 가독성이 더 좋아진 것 같다

ajax를 수없이 사용하면서도 옵션 하나 제대로 활용을 못하고 있는 나... 반성해야겠다

저작자표시 (새창열림)