Showing loading image with getJSON

Question

I want to use a loading image while retrieving data through AJAX with getJSON. I have been looking around but haven't yet found a proper way of doing this. What is the best way to do this?

$.getJSON('file.php', function(json) {
    $.each(json, function() {

    // Retrieving data from json...

    });
});

Answer 1

Show spinner before getJson call and then hide after response is parsed

 $(".someSpinnerImage").show();
    $.getJSON('file.php', function(json) {
       $.each(json, function() {
          // Retrieving data from json...

       });
       $(".someSpinnerImage").hide();  
    });

Answer 2

you can configure for global use, it will be internally called whenever an ajax call is made.

$.ajaxStart(function() {
    $("img#loading").show();
});

$.ajaxComplete(function() {
    $("img#loading").hide();
});