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

第一种：　　

原理就是,在网页载入时在页面最中间打入一个层上面显示,"网页正在载入中...."当网页下载完毕,,用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. [转帖] InfiniBand主流厂商和产品分析

    https://blog.csdn.net/swingwang/article/details/72935461 InfiniBand主流厂商和产品分析 2017年06月08日 22:03:46 Ha ...

  2. Shopping Bands Rank & SBR

    Shopping Bands Rank SBR https://www.guiderank.org/index.html Nike Air Zoom Pegasus 34 http://www.shi ...

  3. BAT等公司必问的8道Java经典面试题，你都会了吗？

    工作多年以及在面试中,我经常能体会到,有些面试者确实是认真努力工作,但坦白说表现出的能力水平却不足以通过面试,通常是两方面原因: 1.“知其然不知其所以然”.做了多年技术,开发了很多业务应用,但似乎并 ...

  4. 解决MySQL复制出错 Last_SQL_Errno:1146

    背景:我们在做数据迁移或者拆分的时候,使用Tablespace transcation 这种解决方案时,很有可能就会遇到 从库复制出错,报: Last_SQL_Errno: 1146 那么具体错误内容 ...

  5. Crawl(2)

    http://cuiqingcai.com/3179.html # *-* coding: UTF-8 *-* import urllib2 import cookielib import re im ...

  6. [LOJ2271] [SDOI2017] 遗忘的集合

    题目链接 LOJ:https://loj.ac/problem/2271 洛谷:https://www.luogu.org/problemnew/show/P3784 BZOJ太伤身体死活卡不过还是算 ...

  7. Luogu 1429 平面最近点对 | 平面分治

    Luogu 1429 平面最近点对 题目描述 给定平面上n个点,找出其中的一对点的距离,使得在这n个点的所有点对中,该距离为所有点对中最小的 输入输出格式 输入格式: 第一行:n:2≤n≤200000 ...

  8. Linux进程间通信（消息队列/信号量+共享内存）

    写在前面 不得不说,Deadline果真是第一生产力.不过做出来的东西真的是不堪入目,于是又花了一早上重写代码. 实验内容 进程通信的邮箱方式由操作系统提供形如 send()和 receive()的系 ...

  9. 【Cf #290 C】Fox And Dinner（最大流）

    如果要相邻两个数(a[i] >= 2)相加为质数,显然它们的奇偶性不同,也就是说一个圆桌(环)必须是偶环. 也就是答案的若干个环组成了一张二分图,其中以奇偶分色. 考虑每个点的度数一定为2,用最 ...

  10. 《Linux内核设计与实现》第3章读书笔记

    第三章 进程管理 一.进程 1.进程就是处于执行期的程序,但并不局限于可执行代码.实际上,进程是正在执行的程序代码的实时结果. 2.执行线程是在进程中活动的对象 每个线程拥有一个独立的计数器.进程栈. ...