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

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秒钟后将显示数据。在此期间，我想添加一个加载图像。我怎样才能做到这一点？

Answer 1

这是我用于加载图像的CSS +
HTML。我使用jQuery简单地添加了一个将不透明度从1更改为0的类，并结合了CSS过渡属性以实现淡入淡出效果。#loader的背景图片为220px X
80px，只是一个纯色的圆角矩形，其右侧为文本“ loading”。实际的“ ajax”微调器img高60像素，因此相对位置和负边距使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（我从http://www.preloaders.net获得了loader.gif
）：

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

})