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

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

复制代码 代码如下:

<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=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/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=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/loading.gif> Loading...</div>
<iframe id="content" style="display:none" src="">

时间: 2024-08-01 13:26:19

网页加载时页面显示进度条加载完成之后显示网页内容_javascript技巧的相关文章

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

Asp.Net 无刷新文件上传并显示进度条的实现方法及思路_实用技巧

相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认"拿来主义",只是我个人更喜欢凡是求个所以然.本篇将阐述通过Html,IHttpHandler和 IHttpAsyncHandler实现文件上传和上传进度的原理,希望对你有多帮助. 效果图: 本文涉及到的知识点:1.前台用到Html,Ajax,JQuery,JQuery UI 2.后台用到一般处理程序(IHttpHandler)和

页面加载显示进度条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

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

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

在线等!。net导出excel时显示进度条

问题描述 从datagrid中提取数据时,因为数据量过大,所以导致弹出保存提示框的时候页面一直在响应过程中,用户希望界面友好,加入进度条,如果很复杂,给一个动态GIF的页面中间提示,直到弹出保存框,GIF结束.谢谢最好有代码,网上找了好多,都不行. 解决方案 解决方案二:谢谢来一个人好心人帮忙下.解决方案三: 解决方案四:感觉CSDN的人越来越少了....解决方案五:这个我做过.你必须提前计算出大概要导出多少行..然后写一个操作进度条的委托,一旦跑了n行调用一些这个委托让进度条走.最终当所有行走

静态页面-JSP页面加加载时卡住,一直无法加载完成

问题描述 JSP页面加加载时卡住,一直无法加载完成 数据库里的内容并没有多少,并且同样的静态页面是可以显示的,换成jsp就不可以了 解决方案 你看看后台报错没有啊? 解决方案二: 你的jsp页面出问题了吧..并且插件没有判断出错的问题,导致一致显示loading状态.用开发工具,如chrome f12或者firefox的firebug看下报什么错误

如何实现将datagridview的内容保存成excel时显示进度条

问题描述 各位大虾:请问如何在保存数据到excel的过程中显示保存的进度条那.我现在讲datagridview的内容保存到excel时总是会卡顿很久,线做一个进度条显示保存的进度.但是不知道怎么弄,求指点!注意:需要真实显示保存的进度状态. 解决方案 解决方案二:保存时如果你是遍历grid,那就加个progressbar就是了解决方案三:引用楼主guangzi8531的回复: 各位大虾:请问如何在保存数据到excel的过程中显示保存的进度条那.我现在讲datagridview的内容保存到exce

cocoa touch-转码mp3格式时显示进度条。

问题描述 转码mp3格式时显示进度条. 使用 LAME 将.caf音频文件编码为.mp3文件. 只有一个问题,需要计算转换文件的时间,用UIProgressView给用户显示转换进度,这点实现不了. NSArray *dirPaths; NSString *docsDir; dirPaths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); docsDir = [dirPaths

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

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