网页Loading效果

Posted 2020-07-01 龍☆

问题描述:由于项目要求在页面提交以及加载的时候，有短暂的卡顿，需要用loading过渡。

1.下一个页面加载的时候实现：

base-loading.js

//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
    _PageWidth = document.documentElement.clientWidth;
//计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
    _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
//在页面未加载完毕之前显示的loading html自定义内容
var _LoadingHtml = ‘<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:‘ +
    _PageHeight + ‘px;top:0;background:#f3f8ff;opacity:1;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ‘ +
    _LoadingLeft + ‘px; top:‘ + _LoadingTop + ‘px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url(/Content/img/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family:\‘Microsoft YaHei\‘;">页面加载中，请等待...</div></div>‘;
//呈现loading效果
document.write(_LoadingHtml);
//window.onload = function () {
//    var loadingMask = document.getElementById(‘loadingDiv‘);
//    loadingMask.parentNode.removeChild(loadingMask);
//};
//监听加载状态改变
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading() {
    if (document.readyState == "complete") {
        var loadingMask = document.getElementById(‘loadingDiv‘);
        loadingMask.parentNode.removeChild(loadingMask);
    }
}

页面调用代码：在head前面引入上面的JS，实现过渡效果。

    <script src="/Content/js/base-loading.js"></script>
</head>

2.页面提交时的过渡效果实现

A.首先在当前页面新建一个隐藏的加载页面的层

 <!-- loading 层 -->
    <div id="loadingDiv2" style="display: none;position:absolute; top: 0;left:0;width:100%;op:0;background:#f3f8ff;opacity:1;filter:alpha(opacity=80);z-index:10000;">
        <div id="loadingDiv3" style="position: absolute; cursor1: wait; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url(/Content/img/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; color: #696969; font-family:\‘Microsoft YaHei\‘;">页面加载中，请等待...</div>
    </div>
</body>

B.当提交按钮点击或者from的ajax提交时调用js，设置隐藏层的高度和位置并显示

function showLoading() {
    var _PageHeight = $(document).height();//document.documentElement.clientHeight,
    _PageWidth = document.documentElement.clientWidth;
    //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
    var _LoadingTop = $(document).scrollTop() + document.documentElement.clientHeight / 2;//折叠高度+1/2浏览器高度得到当前视图中间
        _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
    //隐藏层在_Layout_Survey_Edit.cshtml
    $("#loadingDiv2").height(_PageHeight);
    $("#loadingDiv3").css("left", _LoadingLeft + "px");
    $("#loadingDiv3").css("top", _LoadingTop + "px");
    $("#loadingDiv2").show();
}

C.调用showLoading函数

由于项目用的是Jeuery的数据验证引擎，因此在回调函数onAjaxFormComplete: ajaxValidationCallback中去调用loading函数

//表单验证 事件绑定
    if (!runFormBindingFlag) {
        jQuery(‘.js_form‘).submit(packUncheckItem);
        jQuery(‘.js_form‘).validationEngine({
            showOneMessage: true,
            ajaxFormValidation: true,
            ajaxFormValidationMethod: ‘post‘,
            //onBeforeAjaxFormValidation: showLoading,
            onAjaxFormComplete: ajaxValidationCallback
        });

// 异步提交表格后 回调事件
function ajaxValidationCallback(status, form, json, options) {
    //由于loading效果出现后就无法取得当前页面的token  sUrl信息，因此先取出来
    var sUrl = $("#js_page_hide").attr("page");
    var token = $("#hidden_token").val();
    var currentUrl = "";
    showLoading();
    if (status === true) {
        // uncomment these lines to submit the form to form.action
        // form.validationEngine(‘detach‘);
        // form.submit();
        // or you may use AJAX again to submit the data
        //var currentUrl=location.href.substr(0,location.href.indexOf(‘/Page/‘)+6);
        if (location.href.indexOf(‘/Page/‘) > 0) {
            currentUrl = location.href.substr(0, location.href.indexOf(‘/Page/‘) + 6);
        }
        if (location.href.indexOf(‘/PageView/‘) > 0) {
            currentUrl = location.href.substr(0, location.href.indexOf(‘/PageView/‘) + 10);
        }
        //var sUrl = $("#js_page_hide").attr("page");
        //var token = $("#hidden_token").val();
        if(sUrl) {
            if(sUrl==‘Executive_other_benefits‘) {
                sUrl="/Survey/submit/?token="+token;
                document.location=sUrl;
            }
            else {
                sUrl = currentUrl + sUrl + "?token=" + token + "&isNext=1";//&isNext=1"标记是点击下一页的情况
                document.location=sUrl;
            }
        }
    } else {
        window.location.reload();
        //document.location = currentUrl;//提交失败，则直接刷新
    }
}

由于ajax的异步提交，回调函数会先执行，然后等待服务器的返回status === true，因此将loading函数放在回调处理之前，回调过程中进行了页面跳转并且loading层初始设置为隐藏，因此不需要对loading层进行隐藏。