jquery를 이용한 Ajax 로딩중 알리기
흔히 긴데이타를 로딩할때 화면에 now loㅁding이라는 것을 봤을것이다.데이타가 간단하면 구차하게 쓸필요 없지만 많고 길 경우 현재상황을 알려줄 필요가 있다. jquery를 이용해서 만들어보자
html로딩 소스 짜기
html엘리먼트로 로딩중임을 알려줄 소스를짜보자 보통 그림을 이용하지만 간단하게하기위해 css로 보여줄것이다. 원하는 모습은 아래와 갔다.
now loading
html과 css로 짜준다면
now loading
css에서 가로 세로 80px박스 그리고 최색배경, 검은색테두리를 사용했다.
div#loading{height:80px;
width:80px;
background:#999;
border:10px #000 solid;}
div#loading p{color:#FFF}
웹표준, 단계적 기능향상
의미있는 마크업 코딩을 위해 위 html소스를 스크립트로 짜주자. 웹표준에 대해서 잘 봤다면 항상 마크업페이지에는 콘테츠(정보를 알리는 내용)이 우선이며 기능,부가적인것은 css, 스크립트로 구현하도록 권유되어있는것을 잘알고있을 것이다. 지금 하고자하는바는 로딩하다고 알려주는 기능적인것이다 따라서 위의html을 스크립트로 짜주자
$(document).ready(function() {
$('now loading
')
.insertBefore('#content)
});
또 맨처음에는 보이지않아야하므로 css에서 display:none;으로 처리해주자그리고 나타날 위치를 적당히 잡아준다.
div#loading{
display:none;
position:absolute;
margin: 100px 0 0 500px;}
옵저버함수
옵저버 함수는 요청이 현재 처리중임을 알리는 함수이다.jquery에서는 .ajaxStart(), .ajaxStop()이있다.이것을 이용해 스크립트에서 사용해보자
$(document).ready(function() {
$('Loading...')
.insertBefore('#content')
.ajaxStart(function() {
//호출이시작되면
$(this).show();
//보여준다
}).ajaxStop(function() {
//호출이 끝나면
$(this).hide();
//감춘다.
});
});
이렇게하면 와성된것이다 호출하는 이벤트(이젠예제에서 봤던 클릭이라던가, 검색후) loading 문구가 뜨고 그후 데이타가 나올 것이다.
약간의 딜레이
데이타양이 적은 경우 이같은 기능을 사용할 필요가없다. 굳이 사용하려면 약간의 딜레이를주면된다 맨처음 보여준 html예제 소스를 이용해보자
$(document).ready(function() {
$('#part01').click(function() {
$('#content').hide().load('./ajax_part/abouthtml.html',function() {
$(this).fadeIn();
});
return false;
});
});
.hide()와.fadeIn()이 사용된것을 볼 수 있을것이다 이에 대해선 이전에 설명해 준것이 있을 것이다.이에 대해선 아래를 참조하자
jQuery-hide-show-fade-애니메이션-메소드
마지막으로 완성한 예제를 볼려면 아래를 클릭
댓글