CODEWITHSUNDEEP
jqueryajaxjson
Elephant
Elephant

Reputation: 121

Showing loading image with getJSON

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...

    });
});

Upvotes: 10

Views: 20286

Answers (3)

R0ulito
R0ulito

Reputation: 31

.ajaxStart() documentation says :

As of jQuery 1.9, all the handlers for the jQuery global Ajax events, including those added with the .ajaxStart() method, must be attached to document.

If $.ajax() or $.ajaxSetup() is called with the global option set to false, the .ajaxStart() method will not fire.

Upvotes: 3

heads5150
heads5150

Reputation: 7443

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

Upvotes: 23

dku.rajkumar
dku.rajkumar

Reputation: 18568

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

Upvotes: 5

Related Questions