在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