首页 > 代码库 > 手机站全局的html+css加载等待效果
手机站全局的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=http://www.mamicode.com/‘/loading.gif‘ id=‘loading‘ />");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事件不管哪个添加监听之后，链接就不会跳转了，如果谁有好的解决方案，希望能告诉我！先谢过了....
本人水平有限，实现方式比较低级，欢迎吐槽，共同进步...
手机站全局的html+css加载等待效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。