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

最新推荐文章于 2024-04-25 10:56:26 发布

JackLiu16

最新推荐文章于 2024-04-25 10:56:26 发布

阅读量10w+

点赞数 4

分类专栏： django web前端

web前端同时被 2 个专栏收录

140 篇文章 1 订阅

订阅专栏

django

51 篇文章 0 订阅

订阅专栏

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

第一种：　　

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

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

JackLiu16

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
正在载入中......loading页面的几种方法

　　网页加载过程中提示“载入中…”，特别是使用动画效果，可以一个“等待”的温馨提示，用户体验很不错。下面介绍几种方法。第一种：　　原理就是,在网页载入时在页面最中间打入一个层上面显示,"网页正在载入中...."当网页下载完毕,,用JS关闭这个层......。先在首页HTML最上面...任意位置都行..加入&lt;div id=loading style="position:a...
复制链接

扫一扫