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

第一种：　　

原理就是,在网页载入时在页面最中间打入一个层上面显示,"网页正在载入中...."当网页下载完毕,,用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. Java VM 环境配置过程要点（ win10,64位）

    好些教程写的都不一样.留个脚印免得以后再安装的时候找不到完全合适的教程. 注:JDk中就有java虚拟机,即JRE.除此之外,还有许多的命令包,供java程序员使用. 安装要点: (1)安装jre(j ...

  2. Art & Material

    Art(Android runtime)模式伴随Android 4.4发布.相对于Dalvik模式来说,Art模式改善了Android程序的性能. Material Design伴随Android 5 ...

  3. sublime 对vue的高亮显示

    前提概要: sublime的下载地址:http://www.sublimetext.com/ notepad++下载地址:https://notepad-plus-plus.org/ .vue的文件在 ...

  4. MachineLearning Exercise 7 ： K-means Clustering and Principle Component Analysis

    findClosestCentroids.m m = size(X,); :m [value index] = min(sum((repmat(X(i,:),K,)-centroids).^,)); ...

  5. jmeter函数

    1．常用JMeter函数 1)__regexFunction 正则表达式函数可以使用正则表达式(用户提供的)来解析前面的服务器响应(或者是某个变量值).函数会返回一个有模板的字符串,其中携带有可变的值 ...

  6. QQ分享-定制分享卡片

    一般H5页面在进行分享的时候,都会生成一个分享卡片,但是这些卡片的生成是很多时候是我们是想要生成的卡片, 对于QQ,我们只需要在html页面里加如3个标签即可,如下: <meta itempro ...

  7. python参数传递方式

    原文地址:http://www.cnblogs.com/zhaopengcheng/p/5492183.html python中一切皆对象,函数中参数传递的是对象的引用. 1在函数中改变变量指向的对象 ...

  8. Container With Most Water - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 Container With Most Water - LeetCode 注意点 没什么好注意的... 解法 解法一:暴力求解,假设任意两个端点会是最佳答 ...

  9. golang package log

    package main import ( "log" "os" ) var logger *log.Logger func main() { file, er ...

  10. 特征选择实践---python

    作者:城东链接:https://www.zhihu.com/question/28641663/answer/110165221来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...