Show Loading Image While $.Ajax Is Performed

Show loading image while $.ajax is performed

You can, of course, show it before making the request, and hide it after it completes:

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

I usually prefer the more general solution of binding it to the global ajaxStart and ajaxStop events, that way it shows up for all ajax events:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

Show loading image while ajax being executed

Logic

- Create progress div element
<div id="progress">
    <img style="width:100%" src="/images/spinner.gif"/>
</div>

- By default hide this progress div
- Show when passing ajax request
- Hide when you get ajax response

Script

<script type="text/javascript">

    $(document).ready(function() {

      $("#store, #gender, #username").change(function () {
        var store = $("#store").val();
        var gender = $("#gender").val();
        var receiver = $("#username").val();

        $('#progress').show(); //show progress bar

        $.ajax({
            type: "POST",
            data: {
              "store" : store,
              "gender" : gender,
              "receiver" : receiver
            },
            url: "handling/ajax/store_items_ajax.php",
            success: function(data){
              $('#progress').hide(); //hide progress bar
              $("#result").html(data);
            }
        });
      });

    });

</script>

Display loading gif when AJAX call is in progress

Create an element for loadingImage. On page load keep the image hidden by default.
Show the gif image on button click and hide it again inside success() and error() both.

<script>
    $(document).ready(function(){
        $("#formT button").click(function (ev) {
            ev.preventDefault()
            $("#loadingImage").show(); // <---
            if ($(this).attr("value") == "btn_tool") {
                $.ajax({
                    type: 'post',
                    url: '<?php echo APP_NAME;?>functions/app_form.php',
                    data: $('form').serialize(),
                    success:function(data){
                        $("#loadingImage").hide(); // <---
                        $("#statusT").html(data);
                    },
                    error:function (){
                        $("#loadingImage").hide();  // <---
                        
                    }
                });
            }
        });
    });
</script>

how to show loading image while ajax function in process?

This should just work fine:

function campaignList(){
        $(".main_content").html("<img src='loader.png'>"); // show the ajax loader
        $.ajax({
            type:'post',
            url:'<%=campaignListURL.toString()%>',
            data:{},
            success:function(data){
                $(".main_content").html(data);  // this will hide the loader and replace it with the data                            
            }
        });
    }

Display 'loading' image when AJAX call is in progress

try this :

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#loading')
            .hide()
            .ajaxStart(function() {
                $(this).show();
            })
            .ajaxStop(function() {
                $(this).hide();
            });
    });
</script>

<div id="loading">
        Loading....
</div>

This will show the loading image each time you are doing an ajax request, I have implented this div at the top of my pages, so it does not obstruct with the page, but you can always see when an ajax call is going on.

Display loading image while post with ajax is NOT Working

You need to setup beforeSend method in order to show loading progress and on complete hide it. Only in this case, you guarantee that on success/failure animation will be hidden.

 function Handler(datas, ele) {
        $.ajax({
            url: "FileUploadHandler.ashx",
            type: "POST",
            data: datas,
            contentType: false,
            processData: false,
            beforeSend  : function() {
                  $("#busy").show();
            },
            success: function () {
               ele.width = 100;

            },
            complete: function() {
                $("#busy").hide();
            }

        });
    }

function showHide(){  if($('#busy').css("display") == "none"){      $('#busy').show();  } else {           $('#busy').hide();  }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="busy"><img src="https://rec.redsara.es/registro/img/loading.gif"/></div>


<input type="button" value="click" onclick="showHide()" />