javascript - 当响应需要一段时间时，我应该如何显示旋转图像

Question

我是用户界面开发的新手，您能告诉我如何在响应到达浏览器之前显示旋转器/加载图形图像吗？

我刚刚尝试使用 JQuery 库，如下所示:

$("#signupdialog").dialog({
            title : 'Sign-up Popup',
            width : 500,
            height: 550,
            buttons: [
                      {
                          text : 'Sign-up',
                          icons: {
                                    primary: "btn-primary"
                                 },
                          click : function(){
                              var fname = $("#userFirstName").val();
                              var lname = $("#userLastName").val();
                              var email = $("#userEmail").val();
                              var pwd = $("#userPwd").val();
                              $.get("../../rest/user/save",{
                                            fname: fname,
                                            lname: lname,
                                            email: email,
                                            pwd : pwd
                                        },function(data,status){
                                            $("#result").html("<img src='../images/ajax-loader.gif' height='100px'width='100px'>");
                                            if(status == 'success'){
                                                $("#result").html('');
                                                $("#result").html("<font color='green'>"+data+"</font>");
                                            }
                                });
                          }
                      },
                      {
                          text : 'Cancel',
                          icons: {
                                    primary: "btn-warning"
                                 },
                          click : function(){
                              $(this).dialog("close");
                          }
                      }
                      ],
            closeText : 'CLOSE',
            autoOpen : false,
            modal : true,
            draggable : false,
            resizable : false
    });

在保存操作状态 200 到来之后，我只得到了简单的“已保存”消息(我用服务器端语言编写的内容)。但这里我需要在保存操作之前插入微调器图形文件这意味着保存操作正在进行中

请有人帮我解决这个问题吗？

Answer 1

移动

$("#result").html("<img src='../images/ajax-loader.gif' height='100px'width='100px'>"); 

$.get 行上方的行