2025年正在载入中......loading页面的几种方法

大家好，我是讯享网，很高兴认识大家。

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

第一种：　　

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

下面是实现代码：

复制代码

讯享网<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();

出处：https://www.cnblogs.com/liushusong/p/5088055.html

2025年正在载入中......loading页面的几种方法

相关推荐