正在载入中......loading页面的几种方法

最新推荐文章于 2017-11-28 21:49:00 发布

weixin_30888413

最新推荐文章于 2017-11-28 21:49:00 发布

阅读量2.2k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/liushusong/p/5088055.html

版权

　　网页加载过程中提示“载入中…”，特别是使用动画效果，可以一个“等待”的温馨提示，用户体验很不错。下面介绍几种方法。

第一种：　　

原理就是,在网页载入时在页面最中间打入一个层上面显示,"网页正在载入中...."当网页下载完毕,,用JS关闭这个层......。

先在首页HTML最上面...任意位置都行..加入

<div id=loading style="position:absolute; left:423px; top:261px; width:227px; height:20px; z-index:1">
正在载入中,请稍等.....</div>
<script>
function closeDiv()
{
　　document.getElementById('loading').style.visibility='hidden';
}
</script>

然后在HTML末尾加入

 <script>
　　closeDiv()
</script>

这种简单明了，不过效果可能不会很精确。

第二种：

　　就是利用一个百分比来连续加入一组“||”字符串，然后达到 100% 之后执行一次 self.location.href 跳转。

下面是实现代码：

<html>
<head>
<title>正在载入...</title>
<meta http-equiv="Content-Type" c>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">
<tr>
<form name=loading>
<td align=center>
<p><font color=gray>正在载入首页，请稍候.......</font></p>
<p>
<input type=text name=chart size=46 style="font-family:Arial;
font-weight:bolder; color:gray;
background-color:white; padding:0px; border-style:none;">
<br>
<input type=text name=percent size=46 style="font-family:Arial;
color:gray; text-align:center;
border-width:medium; border-style:none;">
<script>var bar = 0
var line = "||"
var amount ="||"
count()
function count(){
bar= bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count()",100);}
else
{window.location = "http://www.XXXX.com/";}
}
</script>
</p>
</td>
</form>
</tr>
</table>
</body>
</html>

但是这种办法跳转过去再次读取页面而这个效果也就起不到任何预载入的功能,只能说是以假乱真罢了。

第三种：

　　利用DOM模型的document.all 来 document.layers这两个对象来做判断页面是否加载完毕从而实现层的现实和隐藏。顺便说明下document.all 和 document.layers。

document.all是IE浏览器所具有的对象集合，一般用if(document.all)来判断是否是IE浏览器,这个集合代表document对象下所有元素；
document.layers是网景Netscape浏览器所具有的对象集合,这个集合代表document对象下所有的layer(层)。

下面是实现代码：

<html>
<head>
<title>Loading.....</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
<!--
var url = 'http://www.XXXX.com';
//-->
</script>
</head>
<body scroll="no" bgcolor="#FFFFFF" onLoad="location.href = url">
<div align="center">
<br><br><br><br><br><br><br>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FF6600">正在载入XXXX....</font>
</p>
<p>
<script>
<!--
if (document.layers)
     document.write('<Layer src="' + url + ' " VISIBILITY="hide"> </Layer>');
     else if (document.all || document.getElementById)
      document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>');
else location.href = url;
//-->
</script>
</p>
</div>
</body>
</html>

第四种：

　　利用window.onload 是在页面完全读取完毕才执行的特性。

首先在我们在要使用载入条的 HTML 页面设计一个 ID 为 LoadingBar 的层（此层的样式可以随便设置，还可以加入图片在其中。总之就是只要 ID 符合条件，其它都可以随便

javascipt代码：

function initPage()   
{   
    var objLoading = document.getElementById("LoadingBar");   
    if (objLoading != null)   
    {   
        objLoading.style.display = "none";   
    }   
}

html代码：

<div id="LoadingBar">正在载入，请稍候……</div>

这个语句最好是放在页的最前端，也就是紧跟 <body> 标签的下面一行，这样才能确保在读页面的时候最先显示这一层。最后，要在头部加上一段 JavaScript：window.onload = initPage();

转载于:https://www.cnblogs.com/liushusong/p/5088055.html

weixin_30888413

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫