网页加载过程中提示“载入中…”，特别是使用动画效果，可以一个“等待”的温馨提示，用户体验很不错。下面介绍几种方法。

第一种：　　

原理就是,在网页载入时在页面最中间打入一个层上面显示,"网页正在载入中...."当网页下载完毕,,用JS关闭这个层......。

先在首页HTML最上面...任意位置都行..加入

<div id=loading style="position:absolute; left:423px; top:261px; width:227px; height:20px; z-index:1">

正在载入中,请稍等.....</div>

<script>

function closeDiv()

{

　　document.getElementById('loading').style.visibility='hidden';

}

</script>

然后在HTML末尾加入

 <script>

　　closeDiv()

</script>

这种简单明了，不过效果可能不会很精确。

第二种：

　　就是利用一个百分比来连续加入一组“||”字符串，然后达到 100% 之后执行一次 self.location.href 跳转。

下面是实现代码：

<html>

<head>

<title>正在载入...</title>

<meta http-equiv="Content-Type" c>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0">

<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">

<tr>

<form name=loading>

<td align=center>

<p><font color=gray>正在载入首页，请稍候.......</font></p>

<p>

<input type=text name=chart size=46 style="font-family:Arial;

font-weight:bolder; color:gray;

background-color:white; padding:0px; border-style:none;">

<br>

<input type=text name=percent size=46 style="font-family:Arial;

color:gray; text-align:center;

border-width:medium; border-style:none;">

<script>var bar = 0

var line = "||"

var amount ="||"

count()

function count(){

bar= bar+2

amount =amount + line

document.loading.chart.value=amount

document.loading.percent.value=bar+"%"

if (bar<99)

{setTimeout("count()",100);}

else

{window.location = "http://www.XXXX.com/";}

}

</script>

</p>

</td>

</form>

</tr>

</table>

</body>

</html>

但是这种办法跳转过去再次读取页面而这个效果也就起不到任何预载入的功能,只能说是以假乱真罢了。

第三种：

　　利用DOM模型的document.all 来 document.layers这两个对象来做判断页面是否加载完毕从而实现层的现实和隐藏。顺便说明下document.all 和 document.layers。

document.all是IE浏览器所具有的对象集合，一般用if(document.all)来判断是否是IE浏览器,这个集合代表document对象下所有元素；
document.layers是网景Netscape浏览器所具有的对象集合,这个集合代表document对象下所有的layer(层)。

下面是实现代码：

<html>

<head>

<title>Loading.....</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<script language="JavaScript">

<!--

var url = 'http://www.XXXX.com';

//-->

</script>

</head>

<body scroll="no" bgcolor="#FFFFFF" onLoad="location.href = url">

<div align="center">

<br><br><br><br><br><br><br>

<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FF6600">正在载入XXXX....</font>

</p>

<p>

<script>

<!--

if (document.layers)

     document.write('<Layer src="' + url + ' " VISIBILITY="hide"> </Layer>');

     else if (document.all || document.getElementById)

      document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>');

else location.href = url;

//-->

</script>

</p>

</div>

</body>

</html>

第四种：

　　利用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();

正在载入中......loading页面的几种方法的更多相关文章

  1. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  2. JS刷新页面的几种方法(转)

    Javascript刷新页面的几种方法: 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(locat ...

  3. asp.net跳转页面的三种方法比较

    目前,对于学习asp.net的很多朋友来讲,实现跳转页面的方法还不是很了解.本文将为朋友们介绍利用asp.net跳转页面的三种方法,并对其之间的形式进行比较,希望能够对朋友们有所帮助. ASP.NET ...

  4. JS去除数组中重复值的四种方法

    JS去除数组中重复值的四种方法 1 /// <summary>            o[this[i]] = "";  }      }       newArr.p ...

  5. Javascript刷新页面的几种方法：

    Javascript刷新页面的几种方法: 1    history.go(0) 2    window.location.reload() window.location.reload(true)  ...

  6. jquery mobile切换页面的几种方法

    jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...

  7. IOS开发中数据持久化的几种方法－－NSUserDefaults

    IOS开发中数据持久化的几种方法--NSUserDefaults IOS 开发中,经常会遇到需要把一些数据保存在本地的情况,那么这个时候我们有以下几种可以选择的方案: 一.使用NSUserDefaul ...

  8. 在ASP.NET Core中构建路由的5种方法

    原文链接 :https://stormpath.com/blog/routing-in-asp-net-core 在ASP.NET Core中构建路由的5种方法 原文链接 :https://storm ...

  9. C#调用接口注意要点 socket,模拟服务器、客户端通信 在ASP.NET Core中构建路由的5种方法

    C#调用接口注意要点   在用C#调用接口的时候,遇到需要通过调用登录接口才能调用其他的接口,因为在其他的接口需要在登录的状态下保存Cookie值才能有权限调用, 所以首先需要通过调用登录接口来保存c ...

随机推荐

  1. [51CTO]反客为主 ，Linux 成为微软 Azure 上最流行的操作系统

    反客为主 ,Linux 成为微软 Azure 上最流行的操作系统 [世界上唯一确定不变的就是世界在不停的变化] 三年前,微软云计算 Azure 平台 CTO Mark Russinovich 说有四分 ...

  2. d指针在Qt上的应用及实现（有图，很清楚）

    Qt为了使其动态库最大程度上实现二进制兼容,引入了d指针的概念.那么为什么d指针能实现二进制兼容呢?为了回答这个问题,首先弄清楚什么是二进制兼容?所谓二进制兼容动态库,指的是一个在老版本库下运行的程序 ...

  3. 【译】关于vertical-align你应知道的一切

    原文地址:Vertical-Align: All You Need To Know 通常我们需要垂直对齐并排的元素. CSS提供了一些可实现的方法:有时我用浮动float来解决,有时用position ...

  4. Robot Framework 的安装配置和简单的实例介绍

    Robot Framework 介绍 Robot Framework 是一款基于 Python 的功能自动化测试框架.它具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进 ...

  5. Day 5 笔记 dp动态规划

    Day 5 笔记 dp动态规划 一.动态规划的基本思路 就是用一些子状态来算出全局状态. 特点: 无后效性--狗熊掰棒子,所以滚动什么的最好了 可以分解性--每个大的状态可以分解成较小的步骤完成 dp ...

  6. Gson获取json串中的key-value

    1.依赖包 <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson& ...

  7. 【比赛】NOIP2017 列队

    一直忘了发,现在赶快补 用权值线段树维护有人的位置,动态开点省空间 多加的人用个vector存下来就可以了 #include<bits/stdc++.h> #define ui unsig ...

  8. NOI2010~NOI2018选做

    [NOI2010] [NOI2010]海拔 高度只需要0/1,所以一个合法方案就是一个割,平面图求最小割. [NOI2010]航空管制 反序拓扑排序,每次取出第一类限制最大的放置,这样做答案不会更劣. ...

  9. Maximum Subarray - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 Maximum Subarray - LeetCode 注意点 最大值有可能是正负数交替着出现 解法 解法一:一次遍历即可.当sum小于0的时候就重新开始 ...

  10. phpredis用法笔记

    项目中用到redis集群, 发现phpredis对集群,分布式是有支持的.翻译下相关资料备用. redis扩展地址:https://github.com/phpredis/phpredis, 看到如下 ...