weui loading效果实现

  • A+
所属分类:Web前端

weui loading效果实现

Html

  1. <!DOCTYPE html>    
  2. <html lang="en" ng-app="app">    
  3.     <head>    
  4.         <meta charset="UTF-8">    
  5.         <!--<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">-->    
  6.         <meta name="viewport" content="width=device-width" />    
  7.         <meta http-equiv="content-type" content="text/html;charset=gb2312">    
  8.         <title></title>    
  9.         <link rel="stylesheet" type="text/css" href="weui/dist/style/weui.min.css">    
  10.     
  11.         <link rel="stylesheet" type="text/css" href="weui/dist/example/example.css">    
  12.     
  13.         <script src="js/loading.js"></script>    
  14.           
  15.             
  16.     </head>    
  17. <body ontouchstart>    
  18.         
  19.     
  20.         <div id="center" style="display:none">    
  21.            
  22.     
  23.         </div>    
  24.     
  25.            
  26.     
  27.         <script src="weui/dist/example/zepto.min.js"></script>    
  28.         <script src="weui/dist/example/example.js"></script>    
  29.         <script src="js/jweixin-1.0.0.js"></script>    
  30.     
  31. </body>    
  32. </html>    
  33. </pre>  
  34. <h2>loading.js</h2>  
  35. <pre class="prettyprint linenums" >  
  36. //在页面未加载完毕之前显示的loading Html自定义内容    
  37. var _LoadingHtml = '<div class="page__bd" id="loading"><div class="weui-loadmore"><i class="weui-loading"></i><span class="weui-loadmore__tips">正在加载</span></div></div>';    
  38. //呈现loading效果    
  39. document.write(_LoadingHtml);    
  40.     
  41. //window.onload = function () {    
  42. //    var loadingMask = document.getElementById('loadingDiv');    
  43. //    loadingMask.parentNode.removeChild(loadingMask);    
  44. //};    
  45.     
  46. //监听加载状态改变    
  47. document.onreadystatechange = completeLoading;    
  48.     
  49. //加载状态为complete时移除loading效果    
  50. function completeLoading() {    
  51.     if (document.readyState == "complete") {    
  52.         var loadingMask = document.getElementById('loading');    
  53.         loadingMask.parentNode.removeChild(loadingMask);    
  54.         document.getElementById("center").style.display = 'block';    
  55.     }    
  56. }    
钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: