jQuery的阿贾克斯code是：

The jquery ajax code is:

$("#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秒左右后显示。在此期间，装载仪期间，我想添加加载图像。我怎样才能做到这一点？

When I click the button, the data is displayed after 5 seconds or so. During that loding period I want to add a loading image. How can I do this?

推荐答案

下面是我用我的加载图像的CSS + HTML。我使用jQuery简单地增加一个与一个淡入淡出效果的CSS转换属性更改不透明度从1到0，混合类。对于#loader背景图像是220px X 80px与仅有纯色圆角与在右手侧上的文本装载的矩形。实际的阿贾克斯微调IMG是60PX高，从而使相对定位和消极利润率是否有垂直居中IMG。

Here's the CSS + HTML I use for my loading image. I use jQuery to simply add a class that changes the opacity from 1 to 0, in combination with a CSS transition property for a fade effect. The background image for #loader is 220px X 80px and is just a solid color rounded rectangle with the text "loading" on the right hand side. The actual "ajax" spinner img is 60px tall, so that relative positioning and negative margin are there to center the img vertically.

   #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.$p$ploaders。净）：

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

然后你的jQuery：

And then your 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');
        }           
    });

})