how to display ajax loading image

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

         }
    });
});

$(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>

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

         }
    });
});

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.

Before you start your XHR, show the loading image.

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

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