搜狐首页 - 新闻 - 体育 - 娱乐 - 财经 - IT - 汽车 - 房产 - 女人 - 短信 - 彩信 - 校友录 - 邮件 - 搜索 - BBS - 搜狗 
搜狐首页 >> IT频道首页 >> 网狐教程 >> 网站制作 >> Javascript
也为你的网页加一个Loading
2001-10-22 15:48  作者: 张三疯  转自: 赛迪网
页面功能 【我来说两句】【我要“揪”错】【推荐】【字体: 】【打印】 【关闭

  熟悉Flash的朋友都知道一般比较大的Flash作品都要加Loading以防止其播放不连续。相比之下网页就小的多,但是如果在网速很慢的情况下,打开一个10KB左右的网页的时间要超过30秒,这时就有必要加上Loading了。

  Loading的原理很简单,在网页中加入一个不透明的层,z-index属性设为“100”,即使它处在最上一层也不例外,width、height都设为“100%”。当网页加载完毕触发onload事件时会将它隐藏。具体的代码如下:
 

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head><title>为网页加Loading

</title>

<meta http-equiv="Content-Type"

content="text/html; charset=gb2312">

</head>

<body onload='clearInterval(timer);Loading.style.display="none";'>

<div id="Loading" style="position:absolute;width:100%; height:100%; z-index:100;background:white;">

<div id="Waiting" style="position:absolute;left:40%;top:50%;"></div></div>

<script>

var text="正在载入文档";i=0;

function load() {

if (i<6) {

text+=".";

Waiting.innerText=text;

i++;}

else {text="正在载入文档";i=0;}}

timer=window.setInterval("load()",300);

</script>

<!--以下是网页的内容.-->

<img src="http://图片地址">

</body>

</html>

OK!Loading就做完了,试一下吧,不过值得注意的是当文档中只有<script>和<iframe>标记时Loading可能不起作用。
 

2003十大“IT风云人物”
页面功能 【我来说两句】【我要“揪”错】【推荐】【字体: 】【打印】 【关闭





ChinaRen - 繁体版 - 搜狐招聘 - 网站登录 - 帮助中心 - 设置首页 - 广告服务 - 联系方式 - 保护隐私权 - About SOHU - 公司介绍
Copyright © 2004 Sohu.com Inc. All rights reserved. 搜狐公司 版权所有

相关连接

 ■ 我来说两句
用  户:        匿名发出:
请各位遵纪守法并注意语言文明。
 
*经营许可证编号:京ICP00000008号
*《互联网电子公告服务管理规定》
*《全国人大常委会关于维护互联网安全的规定》
短信内容:
手 机
自写包月5分钱/条 更多>>
搜狐天气为你抢先报! 魔力占卜姻缘一线牵!
金币不是赚的是抢的! 爱情玄机任由你游戏!
猪八戒这样泡到紫霞! 帅哥一定要看的宝典!
你受哪颗星星的庇护? 萨达姆最新关押照片!
精彩彩信
[和弦]欧若拉 一生有你
沧海一声笑
[音效]挪威的森林
爆铃 MP3 G点图 动画
[和弦]童话 你到底爱谁
[原唱]一千年以后 断点
[爆笑音效]赚钱拉 野花
[串烧]张韶涵 潘玮柏
精彩短信
[和弦]小薇 好心分手
[音效]当当当当 忘记


搜狐商城
·家电|品牌风扇新品热销
·音乐|秦海璐幸福回味
·图书|《眼镜蛇事件》
更多...