[jQuery] AJAX 로딩 이미지 넣기
이번에 사이트 작업을 하면서 처음으로 AJAX 기능을 활용해보고 있다. 주로 리스트나 DB에서 내용을 불러올 때
사용하고 있는데 간혼 네트웍이 느리거나 내용이 많을 때는 바로 페이지가 보여지지 않는다. 이럴 때 아래 그림처럼
로딩 중이라는 이미지를 넣는데 이걸 어떻게 하는지 한번 해보고 싶어서 연구를 해봤다. 방법은 의외로 싶더라는..
원리는 이렇다. 로딩 전에 로딩 이미지를 보여주고 내용 로딩이 끝나면 그 내용으로 바뀌는 것이다.
예를 들어 코드를 한번 작성해보겠다.
$(‘#btnLoader’).click(function() {
// 로딩 이미지를 보여주고
$(‘#contents’).empty().html(‘<img src=”ajax-load.gif” />’);
// 로딩 이미지를 보여주고
$(‘#contents’).empty().html(‘<img src=”ajax-load.gif” />’);
// AJAX 실행
$(‘#contents’).load(“contents.php”);
});
이런 식으로 작성하면 ID btnLoader를 클릭했을 때 바로 로딩 이미지가 보여지고 다음에 내용이 보여지게 된다.
로딩 이미지의 경로와 php 파일의 경로는 적당히 수정해야 한다.
그리고 AJAX 로딩 이미지는 http://www.ajaxload.info/ 에서 쉽게 만들 수 있다.