页面加载进度条..

原创 2007年09月25日 09:44:00

//(一)首先建立一个ProgressBar.htm页面代码:
<!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" id="mainWindow">
<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>
</html>

//(二)在你要显示的页面page_load,代码:
// 增加命名空间 using System.IO;
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();
    }
 

相关文章推荐

jquery动态页面加载进度条

  • 2013年11月07日 13:27
  • 1.45MB
  • 下载

jQuery nprogress.js页面加载进度条

  • 2015年09月16日 13:38
  • 10KB
  • 下载

动态页面加载进度条

动态页面加载进度条 将以下部分添加到和之间 .p {  font-family: "MS Shell Dlg"; font-size: 12px} --> function ...

页面加载进度条(通过HTTP响应输出)

只要把这写在加载方法的前面就可以了: 运用的时候要把背景图片更换一下 public void Loading() { HttpContext hc = Ht...
  • j04535
  • j04535
  • 2011年09月30日 13:47
  • 213

JavaScript页面加载进度条

目前没有任何浏览器可以直接获取正在加载对象的大小,因此我们只能采取迂回战术,利用浏览器DOM加载的方式去模拟实现页面加载进度 代码如下: ...

vue 页面加载进度条组件

页面加载进度条最初我是在youtube上看到的,后面几乎在各大网站上都能见到它的身影,可以让用户在加载页面的时候不会对着完全空白的页面发呆,提升用户体验但是从开发角度讲,这种进度条在真实性上确实很难把...
  • sjn0503
  • sjn0503
  • 2017年07月25日 15:24
  • 2188

Android实现3D页面加载进度条动画

一.概述最近在研究公司的代码,发现每次切换页面时做的进度条效果还挺不错的,所以想深入研究一下,今天就带大家来看看到底是如何实现的,首先上效果图 二.实现上面的进度条最大的特点就是有种立体的感觉,中间...

Android——仿微信公众号文章页面加载进度条

前言:微信公众号文章详情页面加载的时候,WebView会在头部显示一个进度条,这样做的好处就是用户可以一边加载网页内容的同时也可浏览网页内容,不需要等完全加载完之后才全部显示出来。如何实现呢? 其实很...

Cocos2d-x教程(10)-CCProgressTimer实现页面加载进度条效果

原码下载地址:http://download.csdn.net/detail/u012945598/6683161         相信大家在玩游戏的过程中都会遇到一个loading的界面,lo...

jQuery模拟页面加载进度条

因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:页面加载进度条..
举报原因:
原因补充:

(最多只允许输入30个字)