36

I would like to implement a loading image for my jquery ajax code (this is when the jquery is still processing) below is my code:

$.ajax({
    type: "GET",
    url: surl,
    dataType: "jsonp",
    cache : false,
    jsonp : "onJSONPLoad",
    jsonpCallback: "newarticlescallback",
    crossDomain: "true",
    success: function(response) {
        alert("Success");
    },
    error: function (xhr, status) { 
        alert('Unknown error ' + status);
    }   
});

How can I implement a loading image in this code. Thanks

gen_Eric
  • 223,194
  • 41
  • 299
  • 337
Kern Elliott
  • 1,659
  • 5
  • 41
  • 65

4 Answers4

55

Description

You should do this using jQuery.ajaxStart and jQuery.ajaxStop.

  1. Create a div with your image
  2. Make it visible in jQuery.ajaxStart
  3. Hide it in jQuery.ajaxStop

Sample

<div id="loading" style="display:none">Your Image</div>

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script>
    $(function () {
        var loading = $("#loading");
        $(document).ajaxStart(function () {
            loading.show();
        });

        $(document).ajaxStop(function () {
            loading.hide();
        });

        $("#startAjaxRequest").click(function () {
            $.ajax({
                url: "http://www.google.com",
                // ... 
            });
        });
    });
</script>

<button id="startAjaxRequest">Start</button>

More Information

eirikarvey
  • 87
  • 1
  • 8
dknaack
  • 60,192
  • 27
  • 155
  • 202
  • 2
    So with this approach, on every ajax request image is shown. What if I do not want to. If you want to execute some ajax requests silently without informing the user. – svlada Mar 02 '12 at 06:48
  • How is it not SEO friendly? (Honest Question) – BayssMekanique Sep 27 '12 at 16:46
  • ajaxStart will be called only for first ajax request. This will not be called when any other ajax request is in progress. – subs Mar 02 '16 at 20:46
  • 2
    @svlada, you can disable ajax global events for some ajax request, just setting global to false in this ajax request options. – Luty Apr 19 '16 at 15:05
53

Try something like this:

<div id="LoadingImage" style="display: none">
  <img src="" />
</div>

<script>
  function ajaxCall(){
    $("#LoadingImage").show();
      $.ajax({ 
        type: "GET", 
        url: surl, 
        dataType: "jsonp", 
        cache : false, 
        jsonp : "onJSONPLoad", 
        jsonpCallback: "newarticlescallback", 
        crossDomain: "true", 
        success: function(response) { 
          $("#LoadingImage").hide();
          alert("Success"); 
        }, 
        error: function (xhr, status) {  
          $("#LoadingImage").hide();
          alert('Unknown error ' + status); 
        }    
      });  
    }
</script>
DBS
  • 9,110
  • 4
  • 35
  • 53
Per Kastman
  • 4,466
  • 24
  • 21
  • 10
    Could you please add some indentation? This makes blood come out of my eyes :P – PeeHaa Jan 06 '12 at 17:30
  • 8
    Instead of repeating your self with the code $.("#LoadingImage").hide(); in both "success" and "error" functions, use the "complete" function of the Ajax options. – TSmith Jan 09 '13 at 17:05
  • used the concept with jquery .load() .. thnx – Irf Jan 04 '18 at 15:07
3

Its a bit late but if you don't want to use a div specifically, I usually do it like this...

var ajax_image = "<img src='/images/Loading.gif' alt='Loading...' />";
$('#ReplaceDiv').html(ajax_image);

ReplaceDiv is the div that the Ajax inserts too. So when it arrives, the image is replaced.

Maneksh Veetinal
  • 143
  • 2
  • 8
2

Please note that: ajaxStart / ajaxStop is not working for ajax jsonp request (ajax json request is ok)

I am using jquery 1.7.2 while writing this.

here is one of the reference I found: http://bugs.jquery.com/ticket/8338

ziria
  • 31
  • 1