如何在 jquery ajax 的后期数据处理期间设置加载图像？答案

【问题标题】：How can I set loading image during post data processing for jquery ajax?如何在 jquery ajax 的后期数据处理期间设置加载图像？
【发布时间】：2012-02-11 02:30:54
【问题描述】：

jquery ajax 代码为：

$("#id_btnpolls").click(function(){ 
    var valCheckedRadio = $('input[name=data[distributions]]:checked').val();
    //alert(valCheckedRadio);       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,       
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
        }           
    });

})

当我单击按钮时，数据会在 5 秒左右后显示。在那个加载期间，我想添加一个加载图像。我该怎么做？

【问题讨论】：

标签： javascript jquery ajax post loading

【解决方案1】：

j-man86 指定的 HTML 和 CSS 代码很好。对于 jQuery，您可以在 AJAX 调用中使用 beforeSend 函数。 beforeSend 在发送 AJAX 请求之前调用。要隐藏加载图像，请使用 jQuery AJAX 的 complete 函数，该函数在 AJAX 请求完成后调用。所以代码看起来像：

$("#id_btnpolls").click(function(){ 
    var $body = $('body'),
         valCheckedRadio = $('input[name=data[distributions]]:checked').val();

    $body.addClass('loading');       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,
        beforeSend: function(){
            $body.addClass('loading');
        },
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
        },
        complete: function(){
            $body.removeClass('loading');
        }           
    });

})

【讨论】：

var $body = $('body');很好的捕捉大师:)
您不需要在成功中拥有 removeClass：因为完整：之后将被调用 - 即使它出错。 +1 这样做（在发送/完成之前）。你也可以使用 ajaxSend/ajaxComplete 来做一个全局的 jQuery ajax。
你是对的马克舒尔泰斯。我已经从成功函数中删除了 removeClass()。声明全局 AJAX 配置也是一个好主意。

【解决方案2】：

1) 为图像设置一个 div，通常不可见。

您可以通过 css 执行此操作，方法是添加 visibility:hidden;（相对于 visibility: visible;），或者可选地使用 display: none;

2) 在您的点击处理程序中，使该 div 可见。
3）在done回调中，再次使其不可见。

Directly from the docs,

var request = $.ajax({
  url: "script.php",
  type: "POST",
  data: {id : menuId},
  dataType: "html"
});

request.done(function(msg) {
  $("#log").html( msg );
  // hide your loading image div here
});

【讨论】：

我无法理解您的回答，发布完整的示例代码会有所帮助。什么是 data: {id : menuId} 和 dataType: "html"，图片在哪里？
@guru，这是文档中的一个示例。这只是一个示例 ajax 请求。看看我在其中添加评论的done 方法。

【解决方案3】：

这是我用于加载图像的 CSS + HTML。我使用 jQuery 简单地添加一个将不透明度从 1 更改为 0 的类，并结合 CSS 过渡属性以实现淡入淡出效果。 #loader 的背景图片为 220 像素 X 80 像素，只是一个纯色圆角矩形，右侧带有文本“正在加载”。实际的“ajax”微调器 img 是 60px 高，因此相对定位和负边距可以使 img 垂直居中。

   #loader {
        width: 220px;
        height: 80px;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: -1;
        opacity: 0;
        background: url(assets/images/bg-loader.png) no-repeat center center;
        transition: all .5s ease-in-out;
        margin: -40px 0 0 -110px;
    }

    #loader img {position: relative; top: 50%; margin-top: -30px; left: 10px;}

    .loading #loader {z-index: 1000; opacity: 1.0}

还有 HTML（我从这里得到了 loader.gif http://www.preloaders.net）：

    <div id="loader"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/images/loader.gif" /></div>

然后是你的 jQuery：

$("#id_btnpolls").click(function(){ 
    var $body = $('body'),
         valCheckedRadio = $('input[name=data[distributions]]:checked').val();

    $body.addClass('loading');       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,       
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
            $body.removeClass('loading');
        }           
    });

})

【讨论】：

它是身体元素。通过在 body 上设置加载类，可以很容易地选择其他元素的加载状态。这样，任何你想在加载期间隐藏的元素都可以通过“.loading .element”来选择

【解决方案4】：

查看 jquery 的 blockUI 插件

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

【讨论】：