ajax 사용할 때 로딩문구 표시하기

AJAX를 사용해 콘텐츠를 불러올 경우 지연시간이나 페이지 에러등을 사용자가 인지하기 어렵다. 

또한 AJAX가 진행중인지 아닌지를 구분하는 것 역시 

아무런 인터페이스가 없을 경우 사용성을 크게 해칠 수 있을 것이다. 

만약 페이지 로딩이라도 길어진다면 아무런 반응없는 웹사이트를 보고 

에러라고 생각한 뒤 이탈하려는 유저가 많아질 수 밖에 없을 것이기 때문이다.

이런 이유로 로딩중이라는 효과를 가시적으로 나타나기 위해 아이콘 및 이미지 또는 텍스트 문구를 사용할 수 있다. 

아래에서는 텍스트를 사용했으나 실제로 계속해서 돌아가는 아이콘등 역시 매우 자주 사용된다.

로딩 중 문구를 출력하는 코드 구현하기

아래 코드는 현재 3개의 콘텐츠 내용을 담고있다. 방문자가 더보기 버튼을 클릭할 경우 숨겨진 로딩중이란 문구가 출력되고 불러온 새로운 콘텐츠가 하단에 추가되는 매우 간단한 방법이다.

<ul>

   <li>a. 내용</li>

   <li>b. 내용</li>

   <li>c. 내용</li>

</ul>

<p></p>

<button>내용 더보기</button>

아래는 실제를 화면 인터렉션을 구현하기 위하여 자바스크립트의 제이쿼리를 사용하려고 한다. 

이때 사용할 함수는 AJAX를 실행하기 위한 ajax() 메소드를 사용할 것이고 

페이지 로딩시점에 사용가능한 ajaxStart()와 로딩이 끝난 후 사용할 ajaxStop() 메소드 역시 사용할 것이다. 

이 두 가지 메소드는 AJAX가 시작되거나 끝날 경우 해당하는 함수를 불러오도록 해준다. 

그럼 아래의 소스코드부터 확인하자.

<script>

// AJAX 시작시 호출할 함수를 등록

$(document).ajaxStart(function() {

   $('p').text('Loading !!!');

})

// AJAX가 끝날 경우 호출할 함수를 등록

$(document).ajaxStop(function() {

   $('p').text('');

})

// AJAX로 콘텐츠 불러오는 코드

$.ajax({

   url: '',

   ....

})

</script>

위 코드에서 주목할 부분은 바로 ajaxStart() 메소드와 ajaxStop() 메소드의 코드 부분이다. 

이 부분에 등록된 메소드는 AJAX 호출 또는 종료 이벤트가 발생하는 경우 

해당 함수를 실행하며 우리는 p 태그에 문구가 출력되고 사라지는 것을 볼 수 있을 것이다.

위 예제를 통해 간단하게 로딩 문구를 출력해보았다. 

이처럼 로딩문구를 보여주는 것은 이탈율(Bounce rate)을 낮추고 

페이지뷰를 높이는 효과도 있으므로 

작지만 사용자에게 직관적인 인터페이스 구현에 신경쓰는 것이 매우 좋다 하겠다.

[출처] ajax를 사용하여 로딩 문구 만들기|작성자 EnSSo

http://webisfree.com/blog/?titlequery=ajax%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EB%A1%9C%EB%94%A9-%EB%AC%B8%EA%B5%AC-%EB%A7%8C%EB%93%A4%EA%B8%B0

http://blog.naver.com/aneminw/220735701214