页面加载进度条..

原创 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();
    }
 

页面进度条(ajax刷新)

  • 2009年01月20日 10:50
  • 6KB
  • 下载

HTML5 CSS3 诱人的实例 : 网页加载进度条的实现,下载进度条等

今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用;一般用于下载任务,删除大量任务...
  • lmj623565791
  • lmj623565791
  • 2014年06月26日 12:06
  • 47233

Web页面中实现进度条

  • 2012年08月08日 01:28
  • 1.04MB
  • 下载

CSS3 实现 网页顶部进度条

有朋友们问网页顶部进度条 如何应用,现在github 大部分国外网站 都在用,这个效果可以使用现成的一些插件比如  这个,这个,还有这个。比如youtobe: 前些时候有注意到YouTube网站放出的...
  • xllily_11
  • xllily_11
  • 2016年08月15日 17:55
  • 6317

网页加载进度条中的javascript

demo地址:http://output.jsbin.com/buquyedosa思路如下:代码都有注释,就不一一介绍了。 进度条 .progress{ ...
  • u011263845
  • u011263845
  • 2015年06月12日 10:34
  • 680

页面加载进度条原理

DEMO
  • u014737974
  • u014737974
  • 2016年01月29日 14:39
  • 711

js网页顶部线性页面加载进度条,jquery头部线性进度条总结

前言 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式。网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条。 静态效果如下:点击运行可以测试效果! 头部Loa...
  • Esther_Heesch
  • Esther_Heesch
  • 2016年04月12日 16:06
  • 1422

网页顶部加载进度条实现

下面就是简单点实现了这个功能,不同的是进度条颜色不同。 js代码: $({property: 0}).animate({property: 100}, { duration: 5000,/...
  • xiaoshihoukeshuaiL
  • xiaoshihoukeshuaiL
  • 2017年08月30日 11:10
  • 481

通用页面加载进度条

预加载中.....p {  font-family: "MS Shell Dlg"; font-size: 12px}-->var url = http://www.niudun.com; funct...
  • Teng_s2000
  • Teng_s2000
  • 2006年03月25日 08:42
  • 1497

进度条加载后显示页面

1. 思路:加入很多图片,以延迟加载时间,实现加载完后显示图片。定义一个外层DIV,覆盖住图片,在内层DIV中引入加载时显示的图片,让内层DIV居中在页面上,利用setInterval定时器设置3秒...
  • chaofei_liang
  • chaofei_liang
  • 2017年09月09日 09:27
  • 332
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:页面加载进度条..
举报原因:
原因补充:

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