jQuery로 "바쁜" 표시기를 표시하는 방법?

jQuery로 "바쁜" 표시기를 표시하는 방법?

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

Ajax 요청이 시작/완료되면 인디케이터를 시작/정지하고 싶습니다.

정말로 애니메이션 짤을 보여주고 숨기는 문제일까요, 아니면 더 우아한 해결책이 있을까요?

gif를 표시하거나 숨길 수 있지만, axSetup에 내장할 수도 있기 때문에 axis 요청 시마다 호출됩니다.

$.ajaxSetup({
    beforeSend:function(){
        // show gif here, eg:
        $("#loading").show();
    },
    complete:function(){
        // hide gif here, eg:
        $("#loading").hide();
    }
});

한 가지 주의할 점은 로딩 스피너 없이 특정 axis 요청을 수행하려면 다음과 같이 수행할 수 있습니다.

$.ajax({
   global: false,
   // stuff
});

그러면 이전 $.ajaxSetup에서 우리가 하지 않았던 $.ajaxSet은 요청에 영향을 주지 않을 것입니다.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/

• 또한 API는 명시적으로 회피할 것을 권장합니다.jQuery.ajaxSetup다음의 경우:

  참고: 글로벌 콜백 함수는 해당 글로벌 Ajax 이벤트 핸들러 방식으로 설정해야 합니다..ajaxStart(),.ajaxStop(),.ajaxComplete(),.ajaxError(),.ajaxSuccess(),.ajaxSend()--내부보다는options을 반대하는.$.ajaxSetup().

저는 다른 사람들이 말한 것처럼 IMG를 보여주고 숨기는 경향이 있습니다.gif 로드하기 좋은 웹사이트를 찾았습니다.

링크 나는 그냥 그것을 a안에 넣었습니다.div기본적으로 숨김display: none;(css) 그런 다음 함수를 호출하면 이미지를 표시하고, 한 번 완료되면 다시 숨깁니다.

네, 정말로 애니메이션 짤을 보여주고 hiding하는 것뿐입니다.

내 프로젝트에서 해냈지만,

배경 URL을 gif로 하는 div를 만듭니다. 그것은 애니메이션 gif에 지나지 않습니다.

<div class="busyindicatorClass"> </div>

.busyindicatorClass
{
background-url///give animation here
}

ajax 호출에서 이 클래스를 div에 추가하고 ajax success에서 클래스를 제거합니다.

그것은 그것이 할 수 있는 효과가 있을 것입니다.

다른 물건이 필요하시면 말씀해주세요. 더 자세히 알려드릴 수 있습니다.

ajax success에서 클래스 제거

success: function(data) {
    remove class using jquery
  }

Rodrigo의 솔루션을 약간 확장하기 위해 - 자주 실행되는 요청의 경우, 요청이 최소 시간 간격 이상 걸릴 경우에만 로딩 이미지를 표시할 수 있습니다. 그렇지 않으면 이미지가 계속 팝업되고 빠르게 사라집니다.

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

프로젝트에서 해냈습니다.

응용 프로그램에 전역 이벤트가 있습니다.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";

언급URL : https://stackoverflow.com/questions/4355268/how-to-display-a-busy-indicator-with-jquery