页面加载时让其显示笼罩层与加载等待图片

Posted 2020-08-23 Zbu

页面加载时让其显示笼罩层与加载等待图片（结局比较完美，过程很坎坷，所以一定总结整理下，备用）：

 

用了ajax异步，是因为js内容不能即时的显示出来，因为js是单线程，要把队列中的任务执行完后才会执行刚才对js的处理

要用beforeSend，complete的时候必须要用ajax异步

beforeSend: function () {},//程序一开始便会执行该函数，使用该方法必须使用异步ajax

complete: function () {},//complete在success或error执行后执行

 

$.ajax({

                    type: "POST",

                    url: " ",

                    contentType: "",

                    data: fields,

                    beforeSend: function () {

                        var div1 = document.getElementById(‘form-submit-loading‘);

                        var div2 = document.getElementById(‘form-submit-overlay‘);

                         //由于页面的缓存问题，会出现加载等待图片重复的一些问题，所以在这块进行了判断，如果这些元素id存在直接让它显示就好，如果不存在（undefined），再执行创建的代码

                        if ((div1 == undefined) && (div2 == undefined)) {

　　                  //等待加载图片以笼罩层的创建代码

                        var loading = form_submit_overlay_loading();

                        var overlay = form_submit_overlay_f();

                         // $(‘body‘).append(loading);可以是整个页面，获取整个页面的宽度：$(window).width()。Div1只是个弹出框的id，这块仅对弹出框做加载效果

                         $(‘#Div1‘).append(loading);

                         $(‘#Div1‘).append(overlay);

                          var width = 130;

                          var height = 80;

                          var left = ($(‘#Div1‘).width() / 2) - (width / 2) + $(document).scrollLeft();

                          var top = ($(‘#Div1‘).height() / 2) - (height / 2) + $(document).scrollTop();

                          $("#form-submit-loading").css("top", top + "px").css("left", left + "px").css("display", ‘block‘);

                          $("#form-submit-overlay").css("display", "block");

                        }

                        $("#form-submit-loading").css("display", "block");

                        $("#form-submit-overlay").css("display", "block");

                    },

                    //之所以没使用这个，是因为是修改被人做好的项目，在项目执行success的时候页面被指向了其他地方，回调的时候页面已经不存在，所以complete不会执行

                    //complete:function(){

                    //$("#form-submit-loading").css("display","none");

                    //$("#form-submit-overlay").css("display","none");

                    //},

                    success: function (msg) {

                            if (msg != "sucees") {

                            alert(msg + ",请重新操作");                          

                        } else {

                            alert("操作成功");

                            $("#form-submit-loading").css("display","none");

                            $("#form-submit-overlay").css("display","none");

                        }                          

                    }

                    error: function () {

                    },

                    //默认是false，同步；true为异步

                    async: true

                });

 

JS是单线程的，当一个函数执行的时候，JS引擎会锁住DOM树，其他事件的响应代码只能在队列中等待，并且此时页面卡死。

事实上异步Ajax确实用了多线程，只是Ajax请求的Http连接部分由浏览器另外开了一个线程执行，执行完毕之后给JS引擎发送一个事件，这时候异步请求的回调代码得以执行。

Http请求的执行在另外一个线程中，由于这个线程并不会操作DOM树，所以是可以保证线程安全的。发起Ajax请求和回调函数中间是没有JS执行的，所以页面不会卡死。