weui loading效果实现

来源：互联网发布：新版警察证件网络制作编辑：程序博客网时间：2024/05/29 20:04

界面

<!DOCTYPE html><html lang="en" ng-app="app">    <head>        <meta charset="UTF-8">        <!--<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">-->        <meta name="viewport" content="width=device-width" />        <meta http-equiv="content-type" content="text/html;charset=gb2312">        <title></title>        <link rel="stylesheet" type="text/css" href="weui/dist/style/weui.min.css">        <link rel="stylesheet" type="text/css" href="weui/dist/example/example.css">        <script src="js/loading.js"></script>                  </head><body ontouchstart>            <div id="center" style="display:none">               </div>               <script src="weui/dist/example/zepto.min.js"></script>        <script src="weui/dist/example/example.js"></script>        <script src="js/jweixin-1.0.0.js"></script></body></html>

loading.js

//在页面未加载完毕之前显示的loading Html自定义内容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>';//呈现loading效果document.write(_LoadingHtml);//window.onload = function () {//    var loadingMask = document.getElementById('loadingDiv');//    loadingMask.parentNode.removeChild(loadingMask);//};//监听加载状态改变document.onreadystatechange = completeLoading;//加载状态为complete时移除loading效果function completeLoading() {    if (document.readyState == "complete") {        var loadingMask = document.getElementById('loading');        loadingMask.parentNode.removeChild(loadingMask);        document.getElementById("center").style.display = 'block';    }}

1 0