如何在Javascript中实现Loader

Question

我想要一个简单的＆＃34;页面加载＆＃34;我的照片上传时动画。

所以我已经尝试过＆＃34; blockUI＆＃34; JAVASCRIPT， 但不知怎的，它不适用于我的表格，

这里我使用div作为上传图像的对话框，

提交或上传我已使用ajax调用的图像，

function done()
 {
     var urls = "uploadImage";

    var str = $("#upform").serialize();
     $.ajax({
            type:"post",
            data:str,
            url:urls,
            async: false,
            dataType: "json",
            beforeSend: function() 
            { 

            },
            complete: function() 
            {
                $.unblockUI({});
                HideDialogInsert();
                e.preventDefault();
            },
            success: function(data){

                clear();
              }
          });
 }

然后在那之前做我想做的事情（一个＆＃34;页面加载＆＃34;动画） 我用过，

$("#btnUpload").click(function (e)
            {

                HideDialogInsert();

                $.blockUI({ 
                        message: $('#displayBox'), 
                        css: { 
                            top:  ($(window).height() - 400) /2 + 'px', 
                            left: ($(window).width() - 400) /2 + 'px', 
                            width: '400px' 
                        } 
                        }); 
                done();

             });

但它不起作用， 它不会隐藏上传对话框。 但装载机动画在对话框的背景下工作。

所以请帮我找一个解决方案。

对于BlockUI，这里有一个链接，

jQuery BlockUI Plugin

Answer 1

如果你想隐藏上传对话框，请在完成（）功能之前使用 setTimeout（）函数，以便

块将隐藏，然后将运行更多代码。

试试这个

$("#btnUpload").click(function (e)
            {

                HideDialogInsert();

                $.blockUI({ 
                        message: $('#displayBox'), 
                        css: { 
                            top:  ($(window).height() - 400) /2 + 'px', 
                            left: ($(window).width() - 400) /2 + 'px', 
                            width: '400px' 
                        } 
                    setTimeout($.blockUI, 2000);      }); 

                done();

             });