如何在ajax调用时显示加载图像

Question

I need to show loading image while ajaz is called.... I did some work on this.... But it was not helpful ...It is not showing loading image.... And i want to block screen when image is loading... my ajax is here below...

----ajax---

function checkEmail(value_email_mobile) {

                 // before the request, show the GIF
                 //$('#loader').show();
                if (value_email_mobile !== '') {

                     //alert('te');
                    $.ajax({
                        type: "POST",
                        url: url_check_user_avail_status, 
                        data: "value_email_mobile="+value_email_mobile,
                        success: function(msg) {

                            //alert(msg);

                            //$('#psid').html("<img src='images/spacer.gif'>");
                              $('#loader').hide();
                            $('#validation').html(msg);


                            //

                            //$('#sid').sSelect({ddMaxHeight: '300px'});

                        },
                        error: function() {
                            //alert('some error has occured...');
                        },
                        start: function() {
                            //alert('ajax has been started...');
                             $("#loader").show();
                        }
                    });
                }
            } 

------html--

<div id="loader" style="display:none;"><img src="<wait.png" ></div>

Answer 1

For one thing, your image tag is invalid <img src="<wait.png" > should look like <img src="wait.png"/>

As for the loader, $.ajax has an option called beforeSend. You can use it like so:

                $.ajax({
                    type: "POST",
                    url: url_check_user_avail_status, 
                    data: "value_email_mobile="+value_email_mobile,
                    beforeSend: function () {
                                    $("#loader").show();
                                },
                    success: function(msg) { // success code here
                         $("#loader").hide();
                     });

Answer 2

$.ajax doesn't have start method. Instead you can just show the spinner before calling $.ajax and it will work fine.

if (value_email_mobile !== '') {

    $("#loader").show();

    $.ajax({
        type: "POST",
        url: url_check_user_avail_status, 
        data: "value_email_mobile="+value_email_mobile,
        success: function(msg) {
            $("#loader").hide();
        },
        error: function() {}
    })

   // ...

Answer 3

write this code is working for all ajax request fire on your website.

$( document ).ajaxStart(function() {
    $("#loader").show();
});

Then write ajax stop code.

$( document ).ajaxStop(function() {
    $("#loader").hide();
});