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

【问题标题】：how to show loading image while ajax call如何在ajax调用时显示加载图像
【发布时间】：2014-06-21 07:13:59
【问题描述】：

我需要在调用 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>

【问题讨论】：

是因为您的图片名称有错字吗？ <img src="<wait.png" >
我认为start 不是有效参数。只需将 $('#loader').show(); 行移到 AJAX 调用之前。

标签： javascript jquery html css ajax

【解决方案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();
                     });

【讨论】：

【解决方案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() {}
    })

   // ...

【讨论】：

【解决方案3】：

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

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

然后编写ajax停止代码。

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

【讨论】：