Question

我需要在调用ajaz时显示加载图像.... 我做了一些工作.... 但它没有帮助 ...它没有显示加载图像.... 我想在图像加载时阻止屏幕... 我的ajax在这里......

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

首先，您的图片代码无效<img src="<wait.png" >应该看起来像<img src="wait.png"/>

对于加载器，$ .ajax有一个名为beforeSend的选项。您可以像这样使用它：

                $.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没有start方法。相反，您可以在调用$.ajax之前显示微调器，它将正常工作。

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

编写此代码适用于您网站上的所有ajax请求。

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

然后写一个ajax停止代码。

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

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

3 个答案: