Web Loading effects

Problem Description: Due to the project requirements in the page submission and loading , there is a short lag, need to use loading transition.

1. When the next page is loaded, implement:

Base-loading.js

//get Browser page visibility height and widthvar_pageheight =Document.documentElement.clientHeight, _pagewidth=Document.documentElement.clientWidth;//calculates the distance between the top and left of the loading box (the width of the loading box is 215px and the height is 61px)var_loadingtop = _pageheight > 61? (_pageheight-61)/2:0, _loadingleft= _pagewidth > 215? (_pagewidth-215)/2:0;//loading HTML customizations displayed before the page has finished loadingvar_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\ '; " > page load, please wait for ...</div></div> ';//Rendering Loading Effectsdocument.write (_loadinghtml);//window.onload = function () {//var loadingmask = document.getElementById (' Loadingdiv ');//LoadingMask.parentNode.removeChild (loadingmask);//};//Monitor loading status changeDocument.onreadystatechange =completeloading;//Remove loading effect when load status is completefunctioncompleteloading () {if(Document.readystate = = "complete") {        varLoadingmask = document.getElementById (' Loadingdiv '));    LoadingMask.parentNode.removeChild (Loadingmask); }}

Page call code: in front of the head to introduce the above JS, to achieve the transition effect.

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

2. Implementation of transition effect when page is submitted

A. First create a hidden layer on the current page that loads the page

 <!--Loading Layer -    <DivID= "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; ">        <DivID= "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\ '; ">In the page load, please wait ...</Div>    </Div></Body>

B. Call JS when the Submit button is clicked or from the Ajax commit, set the height and position of the hidden layer and display

functionshowloading () {var_pageheight = $ (document). Height ();//Document.documentElement.clientHeight,_pagewidth =Document.documentElement.clientWidth; //calculates the distance between the top and left of the loading box (the width of the loading box is 215px and the height is 61px)    var_loadingtop = $ (document). ScrollTop () + DOCUMENT.DOCUMENTELEMENT.CLIENTHEIGHT/2;//Folding Height +1/2 browser height Gets the middle of the current view_loadingleft = _pagewidth > 215? (_pagewidth-215)/2:0; //hidden layers in _layout_survey_edit.cshtml$ ("#loadingDiv2"). Height (_pageheight); $("#loadingDiv3"). CSS ("left", _loadingleft + "px")); $("#loadingDiv3"). CSS ("top", _loadingtop + "px")); $("#loadingDiv2"). Show ();}

C. Calling the Showloading function

Because the project is using the Jeuery data validation engine, the loading function is called in the callback function Onajaxformcomplete:ajaxvalidationcallback

// Form Validation event bindings    if (! Runformbindingflag) {        jQuery ('. Js_form '). Submit (Packuncheckitem);        JQuery ('. Js_form '). Validationengine ({            true,            true,             ' Post ',            //onbeforeajaxformvalidation:showloading,             Onajaxformcomplete:ajaxvalidationcallback        });

//callback event after submitting table asynchronouslyfunctionajaxvalidationcallback (status, form, JSON, options) {//the token surl information of the current page cannot be obtained since the loading effect appears, so it is first taken out    varsURL = $ ("#js_page_hide"). attr ("page"); vartoken = $ ("#hidden_token"). Val (); varCurrenturl = "";    Showloading (); if(Status = = =true) {        //uncomment these lines to submit the form to Form.action        //form.validationengine (' Detach ');        //form.submit ();        //Or you could 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 "Mark is the case of clicking on the next pagedocument.location=sURL; }        }    } Else{window.location.reload (); //document.location = currenturl;//commit failed, refresh directly    }}

Because of the asynchronous commit of Ajax, the callback function executes first, and then waits for the server's return status = = = True, so the loading function is placed before the callback process, the page jumps during the callback and the loading layer is initially set to hidden. Therefore, you do not need to hide the loading layer.

Web Loading effects