前端页面在执行某功能时展示“正在执行”的动图

想要在点击注册功能时，出现“正在注册，请稍候”这张动图，怎么办？

具体步骤：
首先，你需要将这张动图添加到你的项目中。（你可以去网上下载一张gif的动图）

然后，在你的前端页面（比如注册页面）中引入这张动图。如下：
<div id="loading"><img src="/images/lodding.gif" alt=""/>正在注册，请稍候...</div>

然后，要设置它的样式：
#loading{
   width:170px;
   height:25px;
   text-align: center;
   margin: 4px auto;
   z-index:10000;
   color: #83e0f9;
   line-height: 25px;
   vertical-align:middle;
   font-size: 11pt;
   display: none;//最初是隐藏的，只有执行了某项功能（比如注册功能）之后才会出现，执行完后消失
}

然后，在<script>标签中写如下这两个函数。（也可以在js文件中写，然后将js文件引入你的登录页面）：

//显示加载图案
function showDiv(){
    $("#loading").show();
}
//隐藏login.jsp中设置的加载图案
function hiddenDiv(){
    $("#loading").hide();
}

最后再使用Ajax来实现：（如下标记处）
下面的关键点在Ajax中的beforeSend和complete。想必很多人之前基本都没有用过这两个东西。它们两的作用正如我下面的注释所写的那样。当前端页面点击“注册”这个按钮的时候，就会执行下面这个register()函数，而咱们引入的那张关于加载的动图最开始的时候是不显示的（关于这点，咱们已经在css样式中设置了，上面代码中也有我写的具体注解。），那这张动图什么时候显示呢？就在你点击注册按钮之后；什么时候隐藏呢？就在你进行用户注册成功之后。
那这两点又该怎么来实现呢？这就要借助Ajax中的beforeSend和complete了。具体的用法在下面代码中有：

//注册功能
function register() {//点击了“注册”按钮之后，执行此函数
    var name=$("#regist_username").val().trim();
    var nickname=$("#nickname").val().trim();
    var password=$("#regist_password").val().trim();

    $.ajax({
        beforeSend:function () {//注册成功之前，显示该关于加载的动图
            showDiv();
        },
        complete:function () {//注册成功之后，隐藏该关于加载的动图
            hiddenDiv();
        },
        url:"/user/register",
        type:"post",
        data:{"name":name,"nickname":nickname,"password":password},
        success:function (response) {
            if(response.success){
                alert("注册成功,请到邮箱中激活账户");
                $("#zc").attr("class","sig sig_out");
                $("#dl").attr("class","log log_in");
            }else {
                alert(response.msg);
                if (response.msg == "格式错误") {
                    var errs = response.data;
                    for (var i = 0; i < errs.length; i++) {
                        alert(errs[i].field + "----" + errs[i].defaultMessage);

                        if (errs[i].field == "name") {
                            var error = $("#warning_1").children().get(0);
                            error.innerText = errs[i].defaultMessage;
                            error.style.color = "red";
                            get('warning_1').style.display = 'block';
                        }
                        if (errs[i].field == "password") {
                            var error = $("#warning_2").children().get(0);
                            error.innerText = errs[i].defaultMessage;
                            error.style.color = "red";
                            get('warning_2').style.display = 'block';
                        }

                    }
                }
            }
        }
    });

}