脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 网页加载进度条

网页加载时页面显示进度条加载完成之后显示网页内容

 更新时间：2012年12月23日 16:59:15   作者：  
网页加载时页面显示进度条（加载完成时显示网页内容）,这种效果在浏览网页很常见，本文也介绍一种实现方法，需要了解的朋友可以参考下
现在网上有很多网页加载进度条 ，但大多都是时间固定的。
下面的当查询大量数据时，网页加载较慢，在网页加载时，显示进度条，当网页加载完成时，进度条消失，显示网页已经加载完成的内容。
复制代码 代码如下:

<html>
<script language=VBScript>
Dim Bar, SP
Bar = 0
SP = 100
Function Window_onLoad()
Bar = 95
SP = 10
End Function
Function Count()
if Bar < 100 Then
Bar = Bar + 1
setTimeout "Count()", SP
else
document.getElementById("jdt").style.display="none"
document.getElementById("content").style.display=""
end if
End Function
Call Count()
</script>
<body>
<div id="jdt" >此处显示进度条，也可以放一张动态图片</div>
<div id="content" style="display:none">网页真正显示的内容</div>
</body>
</html>

----------------------------------------------------
最简单的就是放图片，网页加载完成隐藏图片，显示网页内容
复制代码 代码如下:

<body onLoad="loadDiv.style.display='none';" style="margin:0px;">
<style type="text/css">
#loadDiv {
position:absolute;
z-index:999;
width:expression(document.body.clientWidth);
height:expression(document.body.clientHeight);
background-color:#FFFFFF;
text-align:center;
padding-top:200px;
}
</style>
<div id="loadDiv"><img src="http://www.51ajax.com/images/rss/loading.gif">&nbsp;Loading...</div>
<iframe src="http://505551735.qzone.qq.com/" >
</iframe>
</body>

-------------------------------------------------------
复制代码 代码如下:

<html>
<script language=JavaScript>
function Loaded()
{
document.getElementById("loadDiv").style.display="none"
document.getElementById("content").style.display=""
}
</script>
<body onLoad="Loaded()">
<div id="loadDiv" style="display:block"><img src="http://www.51ajax.com/images/rss/loading.gif">&nbsp;Loading...</div>
<iframe id="content" style="display:none" src="">
您可能感兴趣的文章:

相关文章

  • 原生js实现商品筛选功能

    原生js实现商品筛选功能

    这篇文章主要为大家详细介绍了原生js实现商品筛选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 原生javascript实现图片无缝滚动效果

    原生javascript实现图片无缝滚动效果

    这篇文章主要介绍了原生javascript实现图片无缝滚动效果的相关资料,需要的朋友可以参考下
    2016-02-02
  • 微信小程序自定义组件与页面的相互传参

    微信小程序自定义组件与页面的相互传参

    这篇文章主要为大家介绍了微信小程序自定义组件与页面的相互传参过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪
    2022-04-04
  • js 奇葩技巧之隐藏代码

    js 奇葩技巧之隐藏代码

    这篇文章主要介绍了js 奇葩技巧之隐藏代码,通过代码示例展示了隐藏代码的过程,需要的朋友可以参考下
    2017-08-08
  • javascript实现随机显示星星特效

    javascript实现随机显示星星特效

    这篇文章主要介绍了javascript实现随机显示星星特效的相关资料,以一个完整实例形式较为详细的分析了js实现随机显示星星特效的实现技巧，需要的朋友可以参考下
    2016-01-01
  • 详解JS几种变量交换方式以及性能分析对比

    详解JS几种变量交换方式以及性能分析对比

    本篇文章主要介绍了JS几种变量交换方式以及性能分析对比，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2016-11-11
  • Javascript实现元素选择器功能

    Javascript实现元素选择器功能

    这篇文章主要为大家详细介绍了Javascript实现元素选择器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 深入了解Hybrid App技术的相关知识

    深入了解Hybrid App技术的相关知识

    这篇文章主要介绍了深入了解Hybrid App技术的相关知识，Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具" Native App良好用户交互体验的优势 "和" Web App跨平台开发的优势 ",需要的朋友可以参考下
    2019-07-07
  • js调试系列 源码定位与调试[基础篇]

    js调试系列 源码定位与调试[基础篇]

    如果看了1, 2两篇，你对控制台应该有一个初步了解了，今天我们来个简单的调试。昨天留的三个课后练习，差不多就是今天要讲的内容
    2014-06-06
  • 如何利用JS实现时间轴动画效果

    如何利用JS实现时间轴动画效果

    时间轴动画和帧式动画有很大不同,但相比之下时间轴方式来的更直观和简便,下面这篇文章主要给大家介绍了关于如何利用JS实现时间轴动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06

最新评论