웹 페이지의 특정 지점에 회전하는 “바쁨”표시기를 어떻게 표시합니까?
Ajax 요청이 시작 / 완료 될 때 표시기를 시작 / 중지하고 싶습니다.
실제로 애니메이션 GIF를 표시 / 숨기기 만하는 문제입니까, 아니면 더 우아한 솔루션이 있습니까?
답변
gif를 표시하거나 숨길 수 있지만 ajaxSetup에 포함 할 수도 있으므로 모든 ajax 요청에 대해 호출됩니다.
$.ajaxSetup({
beforeSend:function(){
// show gif here, eg:
$("#loading").show();
},
complete:function(){
// hide gif here, eg:
$("#loading").hide();
}
});
한 가지 참고 사항은 로딩 스피너없이 특정 ajax 요청을 수행하려는 경우 다음과 같이 수행 할 수 있다는 것입니다.
$.ajax({
global: false,
// stuff
});
이렇게하면 이전 $ .ajaxSetup이 global: false
.
자세한 내용은 http://api.jquery.com/jQuery.ajaxSetup 에서 확인할 수 있습니다.
답변
jQuery 문서는 다음과 같은 작업을 권장합니다.
$( document ).ajaxStart(function() {
$( "#loading" ).show();
}).ajaxStop(function() {
$( "#loading" ).hide();
});
사용 중 #loading
표시기가있는 요소는 어디에 있습니까 ?
참조 :
- http://api.jquery.com/ajaxStart/
-
또한
jQuery.ajaxSetup
APIjQuery.ajaxSetup
는 다음을 피할 것을 명시 적으로 권장 합니다.참고 : 글로벌 콜백 함수는 각각의 글로벌 아약스 이벤트 핸들러 methods-로 설정해야합니다
.ajaxStart()
,.ajaxStop()
,.ajaxComplete()
,.ajaxError()
,.ajaxSuccess()
,.ajaxSend()
내에서보다 -ratheroptions
에 대한 객체$.ajaxSetup()
.
답변
나는 다른 사람들이 말한 것처럼 IMG를 표시하거나 숨기는 경향이 있습니다. “loading gifs”를 생성하는 좋은 웹 사이트를 찾았습니다.
링크
그냥 안에 넣어 div
기본 display: none;
(css) 숨긴 다음 함수를 호출하면 이미지 표시가 완료되면 다시 숨 깁니다.
답변
예, 애니메이션 gif를 표시 / 숨기기 만하면됩니다.
답변
나는 내 프로젝트에서 그것을했다.
back ground url을 gif로 div를 만드십시오.
<div class="busyindicatorClass"> </div>
.busyindicatorClass
{
background-url///give animation here
}
ajax 호출 에서이 클래스를 div에 추가하고 ajax 성공에서 클래스를 제거하십시오.
그것이 앉아있는 트릭을 할 것입니다.
다른 것이 필요하면 알려주세요. 자세한 내용을 알려 드릴 수 있습니다.
아약스 성공에서 클래스 제거
success: function(data) {
remove class using jquery
}
답변
로드리고의 솔루션을 조금 확장하려면-자주 실행되는 요청의 경우 요청에 최소 시간 간격 이상이 걸리는 경우에만 로딩 이미지를 표시하고 싶을 수 있습니다. 그렇지 않으면 이미지가 계속 팝업되어 빠르게 사라집니다.
var loading = false;
$.ajaxSetup({
beforeSend: function () {
// Display loading icon if AJAX call takes >1 second
loading = true;
setTimeout(function () {
if (loading) {
// show loading image
}
}, 1000);
},
complete: function () {
loading = false;
// hide loading image
}
});
답변
내 프로젝트에서 수행했습니다.
application.js의 글로벌 이벤트 :
$(document).bind("ajaxSend", function(){
$("#loading").show();
}).bind("ajaxComplete", function(){
$("#loading").hide();
});
“로드”는 표시하고 숨길 요소입니다!