将 Jquery Dialog 与 $post 一起使用时显示 Loader div

Question

这是一个简单的任务，显示了 loader.gif，但不知何故，此代码片段仅在 Firefox 中有效，而在其他浏览器中失败。

我想要实现的是，当用户单击“发送电子邮件”按钮时，他们应该看到一个 loader gif 图像。 加载器 gif 图像是 id 为 validate 的 div 的一部分。

我在这方面投入了大约 8 个小时，并尝试测试了所有替代方案，例如 $ajaxsetup、$ajaxsend、$ajaxstart 等，但没有一个对我有用。

我需要一个适用于流行浏览器的简单示例

这是我的代码

 $j("#dialog-form").dialog({
                autoOpen: false,
                height: 435,
                width: 400,
                modal: true,
                buttons: {
                    "Send Email": function() {

            $j("#validate").show();
            setTimeout(ProcessRequest(),5000);


                        }
                    },
                    Cancel: function() {
                        $j(this).dialog("close");
                    }
                },
                close: function() {
                    allFields.val("").removeClass("ui-state-error");
                }

function ProcessRequest()
            {

                            var jqxhr = $j.post(
                                   "posturl.aspx",
                                   { name: name.val(), email: email.val(), phone: phone.val(), date: date.val() },

                           function(data) {
                                result=data;
                           }).success(function() { OnSuccess(); })
                             .error(function() { OnError(); });

                            jqxhr.success(function() { OnSuccess(); });
                            jqxhr.error(function() { OnError(); });

            }

        <div id="validate" style="display:none">
               <img src='trns_loader.gif' /> Your Order is being processed
 </div>

Answer 1

我使用 loader.gif 的方式技术含量极低，但效果却非常好。

我把loader.gif作为主div的背景，位置为center center。

然后加载的任何内容，我都会将背景设置为白色。

这样，加载程序就会一直显示，直到内容附加到对话框为止。

在所有浏览器中都能很好地工作。