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

现在网上有很多网页加载进度条 ，但大多都是时间固定的。
下面的当查询大量数据时，网页加载较慢，在网页加载时，显示进度条，当网页加载完成时，进度条消失，显示网页已经加载完成的内容。


代码如下:

<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"> 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"> Loading...</div>
<iframe id="content" style="display:none" src="">

赞 (0)

相关推荐

  • 6款新颖的jQuery和CSS3进度条插件推荐

    6款新颖的jQuery和CSS3进度条插件推荐

    现在的网页功能越来越多,尤其是AJAX的广泛应用,进度条和Loading加载动画显得越来越重要了.下面给大家介绍几款比较新颖的jQuery和CSS3进度条Loading加载动画插件,希望对大家有帮助. 1.不同进度显示不同颜色的进度条 这款CSS3进度条和别的有所不同,他的主要特点是随着进度的变化,进度条的颜色会有所改变,这个和游戏中人物的生命值很相似. 2.纯CSS3实现的彩色进度条 该进度条利用了CSS3的颜色渐变属性,让进度条的色彩显得非常具有立体感. 3.jQuery Progress

  • 用jQuery模拟页面加载进度条的实现代码

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: *{margin:0;padding:0;font-size:12px} .loading{position:relative;top:0;le

  • JS 进度条效果实现代码整理

    第一种方法:Loading.js 复制代码 代码如下: //频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content:显示内容,可以为空: *imageURL:将引用JS文件的路径设置即可: *left:进度条显示位置left *top:进度条显示位置top */ function Loa

  • 分享8款优秀的 jQuery 加载动画和进度条插件

    分享8款优秀的 jQuery 加载动画和进度条插件

    加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还有内容正在加载是一种非常好的方式.今天这篇文章向大家推荐10款基于 jQuery 实现的加载动画和进度条插件. Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示 Percentage Loader 一款轻量的 jQue

  • 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码

    基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码

    打造 漂亮 动态 友好的 精选随机色彩 投票百分比展示 效果 HTML结构: 复制代码 代码如下: <ul class="vote-box-list clearfix" id="appVoteBox"> <li class="vl-item" id="voteItem0" > <div class="vote-item-wrap"> <h4>A:</h4

  • 基于jQuery替换table中的内容并显示进度条的代码

    效果图如下:http://jialiren.sinaapp.com/jdt/ Html代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>进度条列</title> <script type=&qu

  • Jquery进度条插件 Progress Bar小问题解决

    个人使用总结: 复制代码 代码如下: <script type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="/Scripts/Method/jquery.progressbar.min.js"></script>[Progres

  • 基于jQuery实现模拟页面加载进度条

    基于jQuery实现模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示. 首先我们先画一个进度条的样子,也就是上图图中的样子,这个不用过多说明,自己看代码 CSS 复制代码 代码如下: .loading{position:relative;top:0;left:0} .tip1{float:left;background:#A7

  • PHP + plupload.js实现多图上传并显示进度条加删除实例代码

    PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码 HTML代码: <!DOCTYPE html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no&qu

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

    现在网上有很多网页加载进度条 ,但大多都是时间固定的. 下面的当查询大量数据时,网页加载较慢,在网页加载时,显示进度条,当网页加载完成时,进度条消失,显示网页已经加载完成的内容. 复制代码 代码如下: <html> <script language=VBScript> Dim Bar, SP Bar = 0 SP = 100 Function Window_onLoad() Bar = 95 SP = 10 End Function Function Count() if Bar

  • Vue项目页面跳转时浏览器窗口上方显示进度条功能

    在vue项目中,为了减少首屏加载的时间,通常会开启路由的懒加载.路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间. 然而,路由懒加载会使得我们在第一次打开一个新页面的时候,会有一个加载时间.如果在这个时候我们没有一个提示的话,给人的感觉会是好像我点了页面跳转但是没反应.所以,这个时候我们可以加一个进度条来告知用户. 具体实现,我们使用NProgress这个滚动条效果插件. 1.安装: cnpm install --save nprogress 2.在main.js中引入: impor

  • Glide实现加载图片显示进度条效果

    Glide实现加载图片显示进度条效果

    先来看看效果图: Glide作为最近几年刚开始流行起来的图片加载库,功能非常强大,我相信好多人都开始在项目中使用了,网上关于Glide的使用教程也非常多,最近在项目中要实现图片的进度条加载,在网上也没看到有现成的,就想着自己研究一下. 使用 Glide.with(MainActivity.this).using(new ProgressModelLoader( new ProgressHandler(MainActivity.this, progressImageView))). load("h

  • 如何实现python爬虫爬取视频时实现实时进度条显示

    如何实现python爬虫爬取视频时实现实时进度条显示

    目录 一.全部代码展示 二.解释 1.with closing with用法(实现上下文管理) closing用法(完美解决上述问题) 2.文件流stream 3.response.headers['content-length'] 4.response.iter_content() 5.\r和% 三.结果展示 四.总结 前言: 在爬取并下载网页上的视频的时候,我们需要实时进度条,这可以帮助我们更直观的看到视频的下载进度. 一.全部代码展示 from contextlib import clos

  • 简单实现js进度条加载效果

    本文实例为大家分享了js进度条加载效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下载进度</title> <style> /*定义父容器*/ .content{ width: 500px; height: 200px; background: pin

  • Struts2实现文件上传时显示进度条功能

    最近在做一个资源共享的项目中,采用了Struts2.1.8+Spring2.5.6+hibernate3.32的框架整合方式进行开发.在文件上传这块,因为需要实现文件上传时显示进度条的功能,所以尝试了一下.怕以后忘记,先贴出来分享下. 要在上传文件时能显示进度条,首先需要实时的获知web服务端接收了多少字节,以及文件总大小,这里我们在页面上使用AJAX技术每一秒向服务器发送一次请求来获得需要的实时上传信息.但是当我们使用struts2后怎么在服务端获得实时的上传大小呢?这里需要用到commons

  • Android 自定义view实现进度条加载效果实例代码

    Android 自定义view实现进度条加载效果实例代码

    这个其实很简单,思路是这样的,就是拿view的宽度,除以点的点的宽度+二个点 之间的间距,就可以算出大概能画出几个点出来,然后就通过canvas画出点,再然后就是每隔多少时间把上面移动的点不断的去改变它的坐标就可以, 效果如下: 分析图: 代码如下: package com.example.dotloadview; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bit

  • python实现文本进度条 程序进度条 加载进度条 单行刷新功能

    python实现文本进度条 程序进度条 加载进度条 单行刷新功能,具体内容如下所示: 利用time库来替代某个程序 的进行过程,做实例, 思路是,简单打印出来程序进度 单行刷新关键是\r, python默认是print后换行,所以加一个\r是光标回退到之前位置 import time tm=10 print('{:-^18}'.format('开始')) for i in range(tm+1): a='#'*i b='.'*(tm-i) c=(i/tm)*100 print('\r{:^3.0

  • Vue 路由切换时页面内容没有重新加载的解决方法

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t

随机推荐