我的一亩三分地 我就喜欢!
13fen  设为主页
 收藏本站
 
当前位置: > 一亩三分地:首页 > 网络学院 > 网页设计 > frontpage > 也为网页加一个“Loading”过渡
热门文章排行
热门文章排行 网页上传常见问题分析(11-24)
五彩缤纷建网页(一)(10-11)
五彩缤纷建网页(二)(10-11)
五彩缤纷建网页(三)(10-11)
五彩缤纷建网页(四)(10-11)
精采文章排行
精采文章排行 网页技巧二十例(11-13)
模仿QQ和MSN消息提示的效果(11-13)
根据分辨率不同调用不同的css文件(11-13)
Dreamweaver 基础 :DW的"文档"工具(11-01)
Dreamweaver 基础 :DW的"文档"窗口(11-01)
技术专题推荐
网管论坛交流
 

也为网页加一个“Loading”过渡 

作者:佚名   来源:Linux 宝库   点击:   日期:2006-11-24


-->
  熟悉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="图片地址">


  </body>


  </html>


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





文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【论坛讨论

   相关文章:
·在状态栏中实现活动文字效果 ·DW+ASP玩转动态二级菜单
·鼠标事件的基础和完美实现 ·DW滑动菜单的制作
·网页里震动的效果怎么做 ·灵活运用DREAMWEAVER的SITE功能

   文章评论:(条)
  
 请留名: 匿名评论   点击查看所有评论 网管论坛
 

  责任编辑:一分  声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。