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

2008-12-30 15:05:39 by 【6yang】, 132 visits, 收藏 | 返回

利用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 层的一个过程。

最后一种又简单，也好理解。

<body>
<div id="loading">
加载中.....
</div>

<div id="Demo" style="display: none">
.....
整个页面全在这里
.....
</div>
<script type="text/javascript">

window.onload=function(){
document.getElementById("loading").style.display="none";
document.getElementById("Demo").style.display="";
}
</script>
</body>

setTimeout]
setTimeout(表达式,延时时间)
在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次

用setTimeout实现的自动变化显示随机数的效果:

<html>
<head>
<script>
window.onload=sett;
function sett()
{
document.body.innerHTML=Math.random();
setTimeout("sett()",500);
}
</script>
</head>
<body>
</body>
</html>

[setInterval]
setInterval(表达式,交互时间)
则不一样,它从载入后,每隔指定的时间就执行一次表达式

用setInterval实现的自动变化显示随机数的效果:

<html>
<head>
<script>
function sett()
{
document.body.innerHTML=Math.random();
}
setInterval("sett();", 500);
</script>
</script>
</head>
<body>
</body>
</html>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=516&cid=3

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 学习技术库

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

图片原图