电脑教程 网站首页 | Windows | Java | Oracle | 平面设计 | 软件应用 | 办公维修 | 手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储
Cisco | Linux | Dotnet | 网页设计 | 网络安全 | 电脑维修 | 数码相机 | 键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印
您现在的位置: 电脑教程 >> 网页设计 >> FrontPage >> 网页设计正文

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

文章来源:网页教学网 作者:佚名 更新时间:2006-4-19 【 】 【加入收藏
  熟悉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可能不起作用

  • 上一篇网页设计:

  • 下一篇网页设计:
  • WINDOWS教程
     CDMA无线网络优化流程与方法
     Wi-Fi探查连接工具帮无线网络管理连…
     无线路由器天线扫描无线信号
     从技术角度看11n走向无线前端的难度
     2008年盘点:从企业应用解析802.11…
     企业网络遭受ARP攻击 需提升网络安…
     与时俱进 分钟级别WEP破解全功略
     不可不知的路由交换安全七宗罪
     无线大讲堂 你的企业无线网络安全吗…
     网管支招:小技巧让企业无线安全上…
    最 新 推 荐
     用FrontPage“八步法”快速建设网站
     FrontPage教程:编辑网页
     FrontPage教程:网页制作基础知识
     FrontPage设计网页禁用JavaScript
     设计网页FrontPage2000的一些基础问…
     分享FrontPage制作网页的几个技巧
     轻松利用FrontPage做站内搜索
     网页字体在Frontpage2000制作网页中…
     制作网页使用FrontPage
     Frontpage制作网页初学问题解答
    LINUX教程
     低配置电脑如何优化Vista系统运行如…
     安全修改注册表默认响应方式
     禁用Vista下的硬盘监控任务栏警告
     巧用GhostEXP 将补丁加入GHO文件
     windows运行中几个特殊的执行命令
     技巧:用MSDaRT解决Vista启动故障
     XP中一人远程管理关机好方法
     一次简单修改 让WinRAR解压缩速度更…
     彻底禁用暴风顽固进程 让系统清爽起…
     通吃主流格式 让系统图片查看器更完…
    相 关 文 章

    美三栏网页布局例子
    SS实现网页表格行鼠标滑过高亮显示
    何让网页表单成为完美的友好用户界面
    助网页设计的优秀Firefox扩展
    助开发者提高网页速度的15个工具
    型网站网页栅格化将是潮流和趋势
    IV+CSS建立的符合web标准网页的好处
    SS网页设计:百分比进行背景图片定位
    html+css网页制作中问题解决的方式
    用Dreamweaver制作网页中的表格
    Flash教程:制作淡雅动态网页菜单
    用Dreamweaver合理为为网页进行优化
    入门:Dreamweaver轻松制作网页页内连接
    ireworks制作多样式实用网页按钮
    ireworks CS3教程:切片工具切网页模板

    最 新 热 门
     谈web分析
     hpcms2008网站内容管理系统免费开源
     ord-wrap和word-break解决连续字符自动换行
     页制作:不同浏览器的CSS Hack写法
     页制作css不解析问题
     持Web标准,在中国
     Flash AS入门教程综合练习:制作拼图游戏
     Flash鼠绘教程:绘制美丽风景画之海滩
     Flash AS入门教程:影片剪辑使用遮罩
     Flash鼠绘:卡通风景画中风车的画法
     Fireworks绘制矢量风格精致手提纸袋
     户体验另外一个角度的认识与看法
     验ebay AIR
     美三栏网页布局例子
     站视觉设计的18个要点

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告 |

      电脑教程 版权所有 粤ICP备06059145号 地图
    门市地址:广东省佛山市南海区黄岐黄海路133号
    本网站所有内容未经许可不得转载或做其他使用
    电话:0757-81139980 QQ:83306923