ajax에서 송신 전처리, 후처리해서 loading 이미지 띄우기 : ajaxStart/ajaxStop, ajaxStart/ajaxStop무효화하기

https://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery

ajaxStart/ajaxStop등록하기

394

In Prototype I can show a "loading..." image with this code:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

In jQuery, I can load a server page into an element with this:

$('#message').load('index.php?pg=ajaxFlashcard');

but how do I attach a loading spinner to this command as I did in Prototype?

jquery spinner prototypejs equivalence language-interoperability

shareimprove this question

edited Sep 1 '12 at 8:01

Danil Speransky

24.8k33 gold badges4949 silver badges6767 bronze badges

asked Sep 16 '08 at 1:18

Edward Tanguay

83.5k276276 gold badges658658 silver badges994994 bronze badges

• If you want to show a spinner whilst images are loading, you can use my jQuery plugin waitForImages. – alex Oct 27 '11 at 8:46 
• 3
  this is a good method - blog.oio.de/2010/11/08/… – SyntaxGoonoo Apr 17 '12 at 23:03
• 3
  See this excellent answer to a similar question: stackoverflow.com/a/1964871/456584 – user456584 Jan 4 '13 at 23:52
• possible duplicate of jQuery "Please Wait, Loading..." animation? – trejder Dec 10 '14 at 10:32

add a comment

24 Answers

activeoldestvotes

777

There are a couple of ways. My preferred way is to attach a function to the ajaxStart/Stop events on the element itself.

$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

The ajaxStart/Stop functions will fire whenever you do any Ajax calls.

Update: As of jQuery 1.8, the documentation states that .ajaxStart/Stop should only be attached to document. This would transform the above snippet to:

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

ajaxStart/ajaxStop무효화하기

ajaxStart/ajaxStop는 덮어 씌워지지 않고, 등록하는 대로 계속 등록되기 때문에 각기 다른 ajaxStart/ajaxStop가 있을 때, 한 처리가 다음처리에 영향을 미치게 된다. 때문에 등록전에 모든 ajaxStart/ajaxStop를 해제하는 것이 좋다.

https://stackoverflow.com/questions/3365456/how-can-i-unregister-a-handler-set-to-jquery-ajaxstart-function

$(document).ready(function () {
   $(document).unbind('ajaxStart');
   $(document).unbind('ajaxStop');
 });

shareimprove this answer