在WEB中为页面加载或查询时间添加loading效果

在WEB上,如果打开的页面要加载的数据比较多,或是查询事件涉及的数据量比较大,且处理逻辑比较复杂的时候,为页面添加loading效果,可以让用户忍耐加载时间,让用户获得更好的体验效果。

<head>

    <style type="text/css">

   <!--为loading标签添加样式-->

    #loading{

    z-index:1;padding:5px 0 5px 9px;
   background:#c44;left:0;top:0;width:90px;
   color:#fff;position:fixed

   }
    </style>

<script type="text/javascript">

        function beforeGetAwb() {
            document.getElementById("loading").innerHTML = "正在加载";
            document.getElementById("loading").style.display = "block";

            //其他相关校验

            }

</script>

</head>

<body>

<!--默认页面装载的时候会显示如下信息-->

<div id="loading">正在加载</div>

<div>

  <input class="button" id="cmdQuery" οnclick="(!beforeGetAwb())?1==1:" type="button"  value="查询" name="cmdQuery" runat="server">

</div>

<!--页面加载完成之后隐藏加载状态-->

  <script type="text/javascript">document.write('<style>#loading{display:none}<\/style>');</script>

</body

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值