手机站全局的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事件不管哪个添加监听之后,链接就不会跳转了,如果谁有好的解决方案,希望能告诉我!先谢过了....
本人水平有限,实现方式比较低级,欢迎吐槽,共同进步...
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。