位置：首页>> 网络编程>> JavaScript>> js实现网页加载loading的显示

js实现网页加载loading的显示

作者：海娃　来源：51windows　发布时间：2007-11-06 12:11:00　

标签：loading,加载,js

相信各位网页爱好者都对网页的loading很感兴趣吧!,想不想知道如何做一个:)

现在给大家介绍一下一种loading的制作..

效果图:

loading效果演示地址:loading.htm

思路:根据源文件下载的进程来实现的,在网页中每隔一部分,加一段代码,来控制一个图片的长度.显示出下载的进程!

javascript(加在源文件的最前面<html><head>之间)

下载完成后隐藏对话框javascript(同样加在<html><head>)

<script language=JavaScript>
function finish(){
if(confirm("下载完成..关闭对话框吗?"))document.all("load").style.display='none';}
</script>

如果想要下载完成后,不要确认,直接隐藏进度条,把上面的代码去掉

if(confirm("下载完成..关闭对话框吗?"))

把<body>改成

<body onload=finish()>

样式表(加在<head></head>之间)

<style type="text/css">

</style>

此处用到了expression,这个比较有用!不必再用js来调用document.body.clientHeight,
#load是控制ID为load的层,表格等元素.主要是让进度条层所在的位置永远位于窗口的中心!
我个觉得用Verdana字体,大小为9pt比较好。

显示部分:(加在<body></body>之间,body的最前面)

<div id=load>请稍候..
<div class=px1><img id=line src="px.gif" style="background-color: #0000FF" height=10></div>
<div id=load_txt>dd</div>
</div>

说明:我们所看到的效果就是

<img id=line src="px.gif" style="background-color:red" height=10>

其中px.gif可以用一个一象素透明的图片,只要通过样式表来控制进度条的颜色.

正在下载XX:XX改成所要下载的内容!

把上面代码手工加进网页,把源文件平均分别几个部,每个部分加上下面代码:(在body></body>之间)

<script>load_n("正在下载XX:");</script>

分的部分数与上面load_line_n相等,不然下载完成后,会出现超过100％或不足100％

loading效果演示地址:loading.htm

然后试试,看到效果了吗?

投稿

js实现网页加载loading的显示

猜你喜欢