Question

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秒左右后显示。在那个loding期间我想添加一个加载图像。我怎么能这样做？

Answer 1

这是我用于加载图片的CSS + HTML。我使用jQuery简单地添加一个类，将不透明度从1更改为0，并结合淡入淡出效果的CSS过渡属性。 #loader的背景图像是220px X 80px，只是一个纯色圆角矩形，右侧有文本“加载”。实际的“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');
        }           
    });

})

Answer 2

1）拥有图像的保持div，通常不可见。

您可以通过css添加visibility:hidden;（vs 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
});

Answer 3

查看jquery的blockUI插件

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

Answer 4

j-man86指定的HTML和CSS代码很好。对于jQuery，您可以在AJAX调用中使用beforeSend函数。在发送AJAX请求之前调用 beforeSend 。要隐藏加载图像，请使用jQuery AJAX的完整功能，该功能在完成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');
        }           
    });

})

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

4 个答案: