에서 프로토 타입 이 코드와 함께 “로드 …”이미지를 표시 할 수 있습니다 :
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();
...
}
답변
사용하는 경우 다음 $.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'});
