您的位置：首页 > 其它

几种常见的载入中、loading页面效果的实现方法总结

2016-02-01 11:31 357 查看

几种常见的载入中、loading页面效果的实现方法总结

网页加载过程中提示“载入中…”，特别是使用动画效果，可以一个“等待”的温馨提示，用户体验很不错。
先说最简单的第一种，原理就是,在网页载入时在页面最中间打入一个层上面显示,"网页正在载入中...."当网页下载完毕,,用JS关闭这个层......。
先在首页HTML最上面...任意位置都行..加入
<DIV id=loading style="position:absolute; left:423px; top:261px; width:227px; height:20px; z-index:1">

正在载入中,请稍等.....</div>

<SCRIPT language=javascript>

function closeDiv()

{

document.getElementById('loading').style.visibility='hidden';

}

</SCRIPT>
然后在HTML末尾加入

<SCRIPT LANGUAGE="JavaScript">


这种简单明了，不过效果可能不会很精确。
第二种以假乱真的
就是利用一个百分比来连续加入一组“||”字符串，然后达到 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">



</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>



</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();
initPage 其实就是最先我不说明用途的那个 initPage() 函数，其实就是关闭 LoadingBar 层的一个过程。
最后一种又简单，也好理解。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航