jQuery에서 로딩 스피너를 표시하는 방법

질문 : jQuery에서 로딩 스피너를 표시하는 방법은 무엇입니까?

---

프로토 타입 에서 다음 코드로 "로드 중 ..."이미지를 표시 할 수 있습니다.

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

jQuery 에서 다음과 같이 요소에 서버 페이지를로드 할 수 있습니다.

$('#message').load('index.php?pg=ajaxFlashcard');

하지만 프로토 타입에서했던 것처럼이 명령에 로딩 스피너를 어떻게 연결합니까?

답변

---

몇 가지 방법이 있습니다. 내가 선호하는 방법은 요소 자체의 ajaxStart / Stop 이벤트에 함수를 연결하는 것입니다.

$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

ajaxStart / Stop 함수는 Ajax 호출을 수행 할 때마다 실행됩니다.

업데이트 : jQuery 1.8부터 문서에 .ajaxStart/Stop document 에만 첨부되어야한다고 명시되어 있습니다. 이것은 위의 스 니펫을 다음과 같이 변환합니다.

var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

출처 : https://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery