zoukankan      html  css  js  c++  java
  • 页面加载时让其显示笼罩层与加载等待图片

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

    用了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执行的,所以页面不会卡死。

     

  • 相关阅读:
    过滤数组中的空字符串
    css换行与不换行属性设置
    js 数据的一些操作
    下拉代码后安装依赖,最后出现:Error: Can't find Python executable "python", you can set the PYTHON env variable.
    H5调用原生方法、传值(对象名.方法名的方式)
    移动端1px 展示粗细问题
    echarts 自定义柱状图,模拟3d效果
    react ant table表格切换分页获取全部选中数据
    【思路探究五】:交点坐标 $P(t,-1)$:;:已知抛物线$C:{x^2} = 4y$ 的焦点为$F$ ,点$A$ 在抛物线$C$ 上,且抛物线$C$在点$A$处的切线与抛物线$C$ 的准线交于点$P$ ,则$ riangle AFP$ 面积的最小值为$underline{qquadqquad}.$
    【思路探究四】:斜率直线$AF$的斜率 $k$:;:已知抛物线$C:{x^2} = 4y$ 的焦点为$F$ ,点$A$ 在抛物线$C$ 上,且抛物线$C$在点$A$处的切线与抛物线$C$ 的准线交于点$P$ ,则$ riangle AFP$ 面积的最小值为$underline{qquadqquad}.$
  • 原文地址:https://www.cnblogs.com/Zbuxu/p/6187328.html
Copyright © 2011-2022 走看看