Mobile Station global HTML+CSS loading wait effect

This article only provides the idea, the CSS God horse's own custom bar, JS is can optimize, for example, the output picture JS also can put to Showdiv () inside, I did not do the optimization, just realizes, do not laugh at me, I am more lazy ...

Basic idea: Because the parsing of HTML is from top to bottom, so you can output a mask layer and a picture of waiting effect on the top page of the master page (layout in MVC), this way, when the page opens, there will be a wait effect. The code is as follows:

Note: The following code must be placed on the front of the page, it may not be good to put in the back.

13<style type="Text/css">4 #loading {5                 /*margin-top:300px;*/6 Position:absolute;7Top +%;8Left -%;9Margin-left:-75px;Tentext-Align:center; Oneline-height:25px; Afont-size:12px; -font-Weight:bold; - color: #F00; theZ-index:1002; -             } - #bg { - Display:none; + Position:absolute; -Top0%; +Left0%; AWidth -%; atHeight -%; -background-Color:black; -Z-index:1001; --moz-opacity:0.6; -Opacity:. -; -Filter:alpha (opacity= -); in             } -</style> to<script type="Text/javascript"> + function Showdiv () { -document.getElementById ("BG"). Style.display ="Block"; the             } * function Hidediv () { $document.getElementById ("BG"). Style.display ='None';Panax Notoginseng             } -document.write ("<div id= ' bg ' ></div>"); the Showdiv (); +</script>

Step two: Add a matte wait effect to all the click events:

1 $ ("a"). Click (function  () {2            showdiv (); 3             $ ("#loading"). FadeIn (); 4         });

Step three: Load the hidden mask layer and wait for the picture:

Page loading complete hidden

1 $ (function() {2             $ (' #loading '). FadeOut (); 3             hidediv (); 4         });

Ajax request plus effect, request complete hide

$ (function  () {            //  set jquery ajax global parameter               $.ajaxsetup ({                 function () {                    showdiv ();                    $ ("#loading"). FadeIn ();                }, complete                :function() {                    $ (' # Loading '). FadeOut ();                    Hidediv ();},})        ;

Ajax I have not been tested to put out, if there are errors, I hope to timely tell me ...

On the phone, should be to listen to its touch event is better, but I give Touchstart event and touched event no matter which add listening, link will not jump, if who has a good solution, hope to tell me! I thanked you first ....

My level is limited, the realization way is relatively low-level, welcome to spit Groove, common progress ...

Mobile Station global HTML+CSS loading wait effect