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

第一种：　　

原理就是,在网页载入时在页面最中间打入一个层上面显示,"网页正在载入中...."当网页下载完毕,,用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. [转帖]Cgroups 与 Systemd

    Cgroups 与 Systemd 大神的文章很牛B .. https://www.cnblogs.com/sparkdev/p/9523194.html 看不太懂 , 转帖一下 自己留着好好看呢. ...

  2. Java并发编程之线程安全、线程通信

    Java多线程开发中最重要的一点就是线程安全的实现了.所谓Java线程安全,可以简单理解为当多个线程访问同一个共享资源时产生的数据不一致问题.为此,Java提供了一系列方法来解决线程安全问题. syn ...

  3. 给表格控件DBGrid加上记录序号的列

    DBGrid使用起来还是很方便的,但就是没有显示记录序号的功能,必须自己加,参照老外给的解决方案如下: 方案1: 1- 在DBGrid建一个第一列 (列的名字起“NO”) 2- 在DBGrid事件 D ...

  4. URL query string中文字符问题

    如果URL的query string中包含中文字符,在不做特殊处理的情况下通过 request.getParameter 方法是获取不到正确的信息的,这是由于下面的两个机制造成的 浏览器会自动对URL ...

  5. 一文总结之Redis

    目录 Redis 目标 Redis简介 什么是Redis 特性 Redis当前应用情况 安装 基本使用 键 exists判断键存在性.del删除键.type键类型 expire key的时效性设置 基 ...

  6. springmvc+mybatis 处理图片(二)：显示图片

    数据库及配置文件等参考:springmvc+mybatis 处理图片(一):上传图片思路:把图片二进制信息写入到HttpServletResponse 的outputStream输出流中来显示图片.一 ...

  7. InvalidArgumentError: You must feed a value for placeholder tensor 'Placeholder_1' with dtype float and shape [?,10]

    在莫烦Python教程的“Dropout 解决 overfitting”一节中,出现错误如下: InvalidArgumentError: You must feed a value for plac ...

  8. maven简单理解

    前言: maven项目也是一个项目,类似于javaProject,javaWebProject,就是多了些功能,其他也没啥,所以大家接触的时候不要害怕! 1 . 帮你下载jar包 maven项目会有一 ...

  9. 【BZOJ3294】放棋子（动态规划，容斥，组合数学）

    [BZOJ3294]放棋子(动态规划,容斥,组合数学) 题面 BZOJ 洛谷 题解 如果某一行某一列被某一种颜色给占了,那么在考虑其他行的时候可以直接把这些行和这些列给丢掉. 那么我们就可以写出一个\ ...

  10. UIImage加载图片的方式以及Images.xcassets对于加载方法的影响

    UIImage加载图片的方式以及Images.xcassets对于加载方法的影响 图片缓存 根据是否将创建好的对象缓存入系统内存,有两类创建UIImage对象的方法可选: 缓存:+ imageName ...