jQuery로 ajax 호출시 로딩중 이미지를 띄워주려면 어떻게 할까?

ajax 호출시 로딩이미지 호출


바로 이런 화면을 구현해 볼까한다.
[호출] 버튼을 클릭하면 구구단 1단을 ajax로 불러오고 불러오는 동안 '로딩중' 이미지를 보여준다.

자, 그럼.. 먼저 index.html 페이지를 만들어보자.

 

구구단 1단을 호출하자.

 

<body>~</body> 사이에 위와 같이 모양을 만들고
<head>~</head> 사이엔 다음과 같이 넣어서 로딩이미지의 위치 및 투명도를 조절해보자.

1
2
3
4
5
6
7
8
9
<style>
    div#viewLoading {
        text-align: center;
        padding-top: 70px;
        background: #FFFFF0;
        filter: alpha(opacity=60);
        opacity: alpha*0.6;
    }
</style>
cs


[호출] 버튼을 클릭하면 fLoadData() 라는 함수가 호출되는데,
이 함수가 ajax로 데이타를 불러오는 부분이다.
<head>~</head> 사이에 자바스크립트를 추가해보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript" src="script/jquery.js"></script>
<script>
    function fLoadData()
    {
        $.ajax({
            type: "POST",
            url: "loadContent.html",
            data: "",
            success: function(resultText)
            {
                $('#loadData').html(resultText);
            },
            error: function() {
                alert("호출에 실패했습니다.");
            }
        });
    }
</script>
cs


 fLoadData() 함수에서 loadContent.html 파일의 데이타를 호출하므로 이것도 만들어보자.
<body>~</body> 사이에 아래와 같이 구구단1절을 넣어보자.

1 x 1 = 1
1 x 2 = 2
1 x 3 = 3
1 x 4 = 4
1 x 5 = 5
1 x 6 = 6
1 x 7 = 7
1 x 8 = 8
1 x 9 = 9


자, 이제 가장 중요한 소스~!
바로.. ajax가 호출될 때 로딩중 이미지를 컨트롤하는 부분이다.
<SCRIPT>~</SCRIPT> 사이에 다음 소스를 넣어보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function($)
{
    // 페이지가 로딩될 때 'Loading 이미지'를 숨긴다.
    $('#viewLoading').hide();
 
    // ajax 실행 및 완료시 'Loading 이미지'의 동작을 컨트롤하자.
    $('#viewLoading')
    .ajaxStart(function()
    {
        // 로딩이미지의 위치 및 크기조절    
        $('#viewLoading').css('position''absolute');
        $('#viewLoading').css('left', $('#loadData').offset().left);
        $('#viewLoading').css('top', $('#loadData').offset().top);
        $('#viewLoading').css('width', $('#loadData').css('width'));
        $('#viewLoading').css('height', $('#loadData').css('height'));
 
        //$(this).show();
        $(this).fadeIn(500);
    })
    .ajaxStop(function()
    {
        //$(this).hide();
        $(this).fadeOut(500);
    });
});
cs


주석으로 설명을 해놨으니 어렵지 않겠지만 간단하게 설명을 하자면..
$(document).ready() 함수는 페이지가 로딩될 때 실행하라는 뜻이고,
.ajaxStart() 함수는 ajax 호출시, .ajaxStop() 함수는 ajax 호출이 완료될 때 실행된다.

.show() .hide() 는 해당 객체를 보여주거나 숨기게 하는 함수이고,
.fadeIn(500) .fadeOut(500) 0.5초 동안 서서히 나타나거나 서서히 사라지는 효과를 만드는 함수이다.

로딩중 이미지를 loadData 객체의 크기에 맞춰 나타나게 하기 위해서 아래와 같이 구현했는데,
더 쉬운 방법이 있을지도 모르겠다. (그 방법을 잘 몰라서 이렇게 구현해 봤다.)

 

// 로딩이미지의 위치 및 크기조절	
$('#viewLoading').css('position', 'absolute');
$('#viewLoading').css('left', $('#loadData').offset().left);
$('#viewLoading').css('top', $('#loadData').offset().top);
$('#viewLoading').css('width', $('#loadData').css('width'));
$('#viewLoading').css('height', $('#loadData').css('height'));

 

이제 구현한 걸 실행해 보면 잘 작동하는 걸 확인할 수 있다.

아래 파일첨부로 예제소스를 올려놨으니 다운받아서 index.html을 실행해보자^^


view_loading.zip