[jQuery] AJAX 로딩 이미지 넣기

이번에 사이트 작업을 하면서 처음으로 AJAX 기능을 활용해보고 있다. 주로 리스트나 DB에서 내용을 불러올 때
사용하고 있는데 간혼 네트웍이 느리거나 내용이 많을 때는 바로 페이지가 보여지지 않는다. 이럴 때 아래 그림처럼
로딩 중이라는 이미지를 넣는데 이걸 어떻게 하는지 한번 해보고 싶어서 연구를 해봤다. 방법은 의외로 싶더라는..

원리는 이렇다. 로딩 전에 로딩 이미지를 보여주고 내용 로딩이 끝나면 그 내용으로 바뀌는 것이다.

예를 들어 코드를 한번 작성해보겠다.

$(‘#btnLoader’).click(function() {
     // 로딩 이미지를 보여주고
     $(‘#contents’).empty().html(‘<img src=”ajax-load.gif” />’);

      // AJAX 실행
     $(‘#contents’).load(“contents.php”);
});

이런 식으로 작성하면 ID btnLoader를 클릭했을 때 바로 로딩 이미지가 보여지고 다음에 내용이 보여지게 된다.
로딩 이미지의 경로와 php 파일의 경로는 적당히 수정해야 한다.

그리고 AJAX 로딩 이미지는 http://www.ajaxload.info/ 에서 쉽게 만들 수 있다.
 

편리

PHP와 MariaDB, jQuery 등을 사용해 게시판, 쇼핑몰 솔루션을 개발합니다. 그누보드5와 영카트5 개발에 참여 했습니다. Linux와 Nginx는 물론 WordPress, Git 등에도 관심이 많습니다. 자전거 타기 및 사진 촬영을 취미로 하고 있습니다.

카카오톡 플러스친구 채팅 : NCUBE.NET

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.