javascript - 如何在 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，只是一个纯色圆 Angular 矩形，右侧带有文本“loading”。实际的“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');
        }           
    });

})