[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();
    })
;

Ajax 시작 / 중지 기능은 Ajax 호출을 할 때마다 실행됩니다.

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

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

답변

jQuery의 경우 사용합니다

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});

답변

jQuery의 .ajax함수를 사용하고 해당 옵션을 사용하고 beforeSend로더 div와 같은 것을 보여줄 수있는 함수를 정의하고 성공 옵션에서는 해당 로더 div를 숨길 수 있습니다.

jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});

Spinning Gif 이미지를 가질 수 있습니다. 다음은 귀하의 색 구성표에 따라 훌륭한 AJAX 로더 생성기 인 웹 사이트입니다. http://ajaxload.info/

답변

AJAX 호출 직전에 애니메이션 이미지를 DOM에 삽입하고 인라인 함수를 사용하여 제거 할 수 있습니다.

$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
  $("#myDiv").html('');
});

그러면 후속 요청에서 애니메이션이 동일한 프레임에서 시작됩니다 (필요한 경우). 이전 버전의 IE 는 애니메이션에 어려움이 있을 수 있습니다.

행운을 빕니다!

답변

$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();

function showResponse() {
    hideLoad();
    ...
}

http://docs.jquery.com/Ajax/load#urldatacallback

답변

사용하는 경우 다음 $.ajax()과 같은 것을 사용할 수 있습니다.

$.ajax({
        url: "destination url",
        success: sdialog,
        error: edialog,
        // shows the loader element before sending.
        beforeSend: function () { $("#imgSpinner1").show(); },
        // hides the loader after completion of request, whether successfull or failor.             
        complete: function () { $("#imgSpinner1").hide(); },
        type: 'POST', dataType: 'json'
    });

답변

로딩 플러그인을 사용하십시오 : http://plugins.jquery.com/project/loading

$.loading.onAjax({img:'loading.gif'});