100分求页面加载时显示"数据加载中"显示框的实现。高手请进
如何实现在页面加载时显示 "数据加载中 "显示框,等页面数据加载完了，关闭显示框，显示页面.
[解决办法]
效果： http://www.followgo.cn
[解决办法]
wang520d(Q) ( ) 信誉：100 2007-08-16 14:40:57 得分: 0
效果： http://www.followgo.cn
－－－－－－－－－－－－－－－－
的js代码是：
<script language= "JavaScript ">
//读取框
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById( 'progress ');
if(elem != null) {
if (pos==0) len += dir;
if (len> 32 || pos> 79) pos += dir;
if (pos> 79) len -= dir;
if (pos> 79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById( 'loader_container ');
targelem.style.display= 'none ';
targelem.style.visibility= 'hidden ';
}
</script>
<body onLoad= "remove_loading(); ">
<div id= "loader_container ">
<div id= "loader ">
<div align= "center "> 页面正在加载中 ... </div>
<div id= "loader_bg "> <div id= "progress "> </div> </div>
</div>
</div>
当然，你要是ajax的话，就判断state＝＝０｜｜state＝＝１｜｜state＝＝２｜｜state＝＝３
的时候，让一个div.innerＨＴＭＬ＝＂数据载入中ing．．．＂；就可以了
[解决办法]
在Page_Load事件里输入： Visual C# .NET代码
Response.Write( " <div id= 'mydiv ' > ");
Response.Write( "_ ");
Response.Write( " </div> ");
Response.Write( " <script> mydiv.innerText = ' '; </script> ");
Response.Write( " <script language=javascript> ; ");
Response.Write( "var dots = 0;var dotmax = 10;function ShowWait() ");
Response.Write( "{var output; output = '正在装载页面 ';dots++;if(dots> =dotmax)dots=1; ");
Response.Write( "for(var x = 0;x < dots;x++){output += '· ';}mydiv.innerText = output;} ");
Response.Write( "function StartShowWait(){mydiv.style.visibility = 'visible '; ");
Response.Write( "window.setInterval( 'ShowWait() ',1000);} ");
Response.Write( "function HideWait(){mydiv.style.visibility = 'hidden '; ");
Response.Write( "window.clearInterval();} ");
Response.Write( "StartShowWait(); </script> ");
Response.Flush();
Thread.Sleep(10000);
在ShowProgress.aspx窗体的html的中输入：
<script>
HideWait();
</script>
[解决办法]
可以用UpdatePanel+UpdateProgess实现
[解决办法]
是不是想要加载条页面那种.是的话下面可以满足..
首先新建一下HTML页面源代码如下:
<head>
<title> 无标题页 </title>
<script language= "javascript " type= "text/javascript ">
function SetPorgressBar(pos)
{
//设置进度条居中
var screenHeight = window[ "mainWindow "].offsetHeight;
var screenWidth = window[ "mainWindow "].offsetWidth;
ProgressBarSide.style.width = Math.round(screenWidth / 4);
ProgressBarSide.style.left = Math.round(screenWidth / 3);
ProgressBarSide.style.top = Math.round(screenHeight / 2);
ProgressBarSide.style.height = "21px ";
ProgressBarSide.style.display = " ";
//设置进度条百分比
ProgressBar.style.width = pos + "% ";
ProgressText.innerHTML = "正在加载,请稍后..... " + pos + "% ";
}
//完成后隐藏进度条
function SetCompleted()
{
ProgressBarSide.style.display = "none ";
MyTable.style.display= "none ";
}
</script>
</head>
<body>
<!-- <div id= "mydiv " style= "width: 224px "> 数据处理中.... </div> -->
<div id= "ProgressBarSide " style= "position:absolute;height:21px;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none ">
<div id= "ProgressBar " style= "position:absolute;height:21px;width:0%;background-color:PaleTurquoise "> </div>
<div id= "ProgressText " style= "position:absolute;height:21px;width:100%;text-align:center "> </div>
</div>
</body>
然后在你需加加载的界的代码:
窗体加载:
if (!Page.IsPostBack)
{
beginProgress();
for (int i = 1; i <= 100; i++)
{
setProgress(i);
//此处用线程休眠代替实际的操作，如加载数据等
System.Threading.Thread.Sleep(20);
}
finishProgress();
}
函数:
private void beginProgress()
{
//根据ProgressBar.htm显示进度条界面
string templateFileName = Path.Combine(Server.MapPath( ". "), "ProgressBar.htm ");
StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding( "GB2312 "));
string html = reader.ReadToEnd();
reader.Close();
Response.Write(html);
Response.Flush();
}
private void setProgress(int percent)
{
string jsBlock = " <script> SetPorgressBar( ' " + percent.ToString() + " '); </script> ";
Response.Write(jsBlock);
Response.Flush();
}
private void finishProgress()
{
string jsBlock = " <script> SetCompleted(); </script> ";
Response.Write(jsBlock);
Response.Flush();
}
