jQuery로 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
'프로그래밍 언어 > jQuery' 카테고리의 다른 글
| [jQuery] 글자 폰트 사이즈 늘리고 줄이기 예제 (0) | 2014.12.03 |
|---|---|
| [jQuery] 행에 징검다리 스타일 입히기 (:odd, :even) (0) | 2014.12.03 |
| [jQuery] 리스트 항목에 레벨 단위로 스타일 입히기 (UL, LI 태그) (0) | 2014.12.03 |
| [jQuery] ajax로 값을 가져올 때 UTF-8 환경에서 한글깨짐 해결하기 - 자바(java) (2) | 2014.10.29 |
| [jQuery] 제이쿼리 API (0) | 2011.05.24 |
댓글