how to display ajax loading image

Question

I want to show ajax loading image. but don't know how to do that. here is my working ajax script. please help me to integrate ajax loading gif.thanks

$(function() { 
    $( "#slider" ).slider({ 
       stop: function(event, ui) {
              $.ajax({
              url: "ajax.php",
              cache: false,
              async: false,
             data: "",
                  success: function(html){
                $("#result_list").html(html);
              }
            });

         }
    });
});

You should consider making your request asynchronous.

alex
– alex

2011-05-26 05:38:00 +00:00
Commented May 26, 2011 at 5:38 — alex
– alex, Commented May 26, 2011 at 5:38

Dmitry Romanov · Accepted Answer · 2012-03-17 11:48:43Z

6

$(function() { 
$( "#slider" ).slider({ 
   stop: function(event, ui) {
          $("#place_of_loading_image").show();
          $.ajax({
          url: "ajax.php",
          cache: false,
          async: false,
          data: "",
          success: function(html){ //got the data

            $("#place_of_loading_image").hide(); // hide ajax loader         
            $("#result_list").html(html);        // show downloaded content
          }
        });

     }
    });
});

Where #place_of_loading_image is some container (like div), in a place you would like loader.gif to appear.

<div id="place_of_loading_image" style="display:none"><img src="load.gif"/></div>

edited Mar 17, 2012 at 11:48

answered May 26, 2011 at 5:39

Dmitry Romanov

14.2k13 gold badges66 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

no_freedom Over a year ago

this script is working fine in firefox. but not in opera,chrome, ie. please help me thanks

Dmitry Romanov Over a year ago

I edited the post. With this variant you can first remove 'style="display:none"' and see that this image is correctly displayed for all browsers.

samwise · Accepted Answer · 2011-05-26 05:38:56Z

2

Have you looked at blockui? http://jquery.malsup.com/block/

$(function() { 
    $( "#slider" ).slider({ 
       stop: function(event, ui) {
          $.blockUI({ message: null });  //loading
              $.ajax({
              url: "ajax.php",
              cache: false,
              async: false,
             data: "",
                  success: function(html){
                  $.unblockUI(); //loading complete
                $("#result_list").html(html);
              }
            });

         }
    });
});

answered May 26, 2011 at 5:38

samwise

4615 silver badges15 bronze badges

Comments

Pir Abdul · Accepted Answer · 2011-05-26 05:44:34Z

1

Ajax have api ajax start and ajax stop, when ever an ajax request is send this apis triggers

 $(document).bind("ajaxStart.mine", function() {
      $("#image").html("<img src="loading.gif"/>");
    });

$(document).bind("ajaxStop.mine", function() {
  $("#image").html("");
});

Show and Hide your image using classes.

answered May 26, 2011 at 5:44

Pir Abdul

2,3721 gold badge28 silver badges35 bronze badges

Comments

alex · Accepted Answer · 2011-05-26 05:37:17Z

0

Before you start your XHR, show the loading image.

On the success callback of your XHR, hide the loading image.

answered May 26, 2011 at 5:37

alex

492k205 gold badges891 silver badges992 bronze badges

Comments

Naveed · Accepted Answer · 2011-05-26 05:44:51Z

0

Something like this will help.

At start of your function:

jQuery('#processing').html( '<img src="/images/ajaxBigFlower.gif">' );
$('#submit').attr("disabled", true);

In success part of your function:

jQuery('#processing').html( '' );
$('#submit').attr("disabled", false);

Note: <div id='processing'></div> should be in your HTML and you can set the position of this DIV anywhere on page using css. And set id='submit' for these submit buttons that you want to set as disabled when it is processing...

edited May 26, 2011 at 5:44

answered May 26, 2011 at 5:39

Naveed

42.3k31 gold badges101 silver badges132 bronze badges

Collectives™ on Stack Overflow

how to display ajax loading image

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related