jQuery를 사용하여 "사용 중"표시기를 표시하는 방법은 무엇입니까?

웹 페이지의 특정 지점에 회전하는 "바쁨"표시기를 어떻게 표시합니까?

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/

• http://api.jquery.com/ajaxStop/

• 또한 jQuery.ajaxSetupAPIjQuery.ajaxSetup 는 다음을 피할 것을 명시 적으로 권장 합니다.

  참고 : 글로벌 콜백 함수는 각각의 글로벌 아약스 이벤트 핸들러 methods-로 설정해야합니다 .ajaxStart(), .ajaxStop(), .ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()내에서보다 -rather options에 대한 객체 $.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();
 });

"로드"는 표시하고 숨길 요소입니다!

참조 : http://api.jquery.com/Ajax_Events/

나는 사용해야했다

HTML:
   <img id="loading" src="~/Images/spinner.gif" alt="Updating ..." style="display: none;" />

In script file:
  // invoked when sending ajax request
  $(document).ajaxSend(function () {
      $("#loading").show();
  });

  // invoked when sending ajax completed
  $(document).ajaxComplete(function () {
      $("#loading").hide();
  });

오래된 스레드이지만 오늘이 문제에 대해 작업했기 때문에 업데이트하고 싶었습니다. 프로젝트에 jquery가 없었기 때문에 일반 자바 스크립트 방식으로 수행했으며 화면의 내용을 차단해야하므로 xhtml에서

    <img id="loading" src="#{request.contextPath}/images/spinner.gif" style="display: none;"/>

내 자바 스크립트에서

    document.getElementsByClassName('myclass').style.opacity = '0.7'
    document.getElementById('loading').style.display = "block";