手机站全局的html+css加载等待效果

本文只提供思路,CSS神马的自己定制吧,JS是可以优化的,比如,输出图片的JS也可以放到showdiv()里面,我没有做优化,只是实现,别笑话我,我比较懒...

基本思路:由于Html的解析是从上到下的,所以,可以在母版页(MVC中的LayOut)页面最上面输出一个遮罩层和一张等待效果的图片,这样子,页面打开的时候,就会有一个等待效果了。代码如下:

注意:下面这些代码一定是放到页面的最前面的,放到后面可能就不太好了。

 1 <head>
 3         <style type="text/css">
 4             #loading {
 5                 /*margin-top:300px;*/
 6                 position: absolute;
 7                 top: 40%;
 8                 left: 60%;
 9                 margin-left: -75px;
10                 text-align: center;
11                 line-height: 25px;
12                 font-size: 12px;
13                 font-weight: bold;
14                 color: #F00;
15                 z-index: 1002;
16             }
17             #bg {
18                 display: none;
19                 position: absolute;
20                 top: 0%;
21                 left: 0%;
22                 width: 100%;
23                 height: 100%;
24                 background-color: black;
25                 z-index: 1001;
26                 -moz-opacity: 0.6;
27                 opacity: .60;
28                 filter: alpha(opacity=60);
29             }
30         </style>
31         <script type="text/javascript">
32             function showdiv() {
33                 document.getElementById("bg").style.display = "block";
34             }
35             function hidediv() {
36                 document.getElementById("bg").style.display = none;
37             }
38             document.write("<img src=‘/loading.gif‘ id=‘loading‘ /><div id=‘bg‘></div>");
39             showdiv();
40         </script>

第二步:给所有的的点击事件加上遮罩等待效果:

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

第三步:加载完了隐藏遮罩层和等待图片:

页面加载完成隐藏

1 $(function() {
2             $(‘#loading‘).fadeOut();
3             hidediv();
4         });

AJAX请求加上效果,请求完成隐藏

 $(function () {
            // 设置jQuery Ajax全局的参数  
            $.ajaxSetup({
                beforeSend: function () {
                    showdiv();
                    $("#loading").fadeIn();
                },
                complete:function() {
                    $(‘#loading‘).fadeOut();
                    hidediv();
                },
            });
        });

 

AJAX我没有经过测试放出来的,如果有错误,希望能及时告诉我...

在手机上,应该是去监听它的Touch事件比较好,但是我给TouchStart事件和Touched事件不管哪个添加监听之后,链接就不会跳转了,如果谁有好的解决方案,希望能告诉我!先谢过了....

本人水平有限,实现方式比较低级,欢迎吐槽,共同进步...

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。