Asp.net"页面加载中"效果实现

最新推荐文章于 2019-01-16 08:21:14 发布

lyshrine

最新推荐文章于 2019-01-16 08:21:14 发布

阅读量5.0k

点赞数

分类专栏： WEB开发文章标签： asp.net css javascript function 2010 ajax

WEB开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

http://hi.baidu.com/cavalry1/blog/item/2368be1e6767c91a403417f9.html

Asp.net"页面加载中"效果实现

2008-04-29 16:00

在网上找了好多，实现方式大多是使用定时器

个人觉得定时器会造成一定程度上的假象

（如：定时器还没结束页面已经加载完毕，或定时器结束后页面还没加载完成）

本方法利用的是javascript，先网页面里面写入一个层，显示加载框，然后等页面结束后

在body的onload中写入事件，隐藏该对话框

方法（我的系统是多个页面，所以写了一个公用的类common.cs）：

在类里面加入如下函数（也可在每个代码后文件中写入）：

#region "页面加载中效果"
/// <summary>
/// 页面加载中效果
/// </summary>
public static void initJavascript()
{
HttpContext.Current.Response.Write(" <script language=JavaScript type=text/javascript>");
HttpContext.Current.Response.Write("var t_id = setInterval(animate,20);");
HttpContext.Current.Response.Write("var pos=0;var dir=2;var len=0;");
HttpContext.Current.Response.Write("function animate(){");
HttpContext.Current.Response.Write("var elem = document.getElementById('progress');");
HttpContext.Current.Response.Write("if(elem != null) {");
HttpContext.Current.Response.Write("if (pos==0) len += dir;");
HttpContext.Current.Response.Write("if (len>32 || pos>79) pos += dir;");
HttpContext.Current.Response.Write("if (pos>79) len -= dir;");
HttpContext.Current.Response.Write(" if (pos>79 && len==0) pos=0;");
HttpContext.Current.Response.Write("elem.style.left = pos;");
HttpContext.Current.Response.Write("elem.style.width = len;");
HttpContext.Current.Response.Write("}}");
HttpContext.Current.Response.Write("function remove_loading() {");
HttpContext.Current.Response.Write(" this.clearInterval(t_id);");
HttpContext.Current.Response.Write("var targelem = document.getElementById('loader_container');");
HttpContext.Current.Response.Write("targelem.style.display='none';");
HttpContext.Current.Response.Write("targelem.style.visibility='hidden';");
HttpContext.Current.Response.Write("}");
HttpContext.Current.Response.Write("</script>");
HttpContext.Current.Response.Write("<style>");
HttpContext.Current.Response.Write("#loader_container {text-align:center; position:absolute; top:40%; width:100%; left: 0;}");
HttpContext.Current.Response.Write("#loader {font-family:Tahoma, Helvetica, sans; font-size:11.5px; color:#000000; background-color:#FFFFFF; padding:10px 0 16px 0; margin:0 auto; display:block; width:130px; border:1px solid #5a667b; text-align:left; z-index:2;}");
HttpContext.Current.Response.Write("#progress {height:5px; font-size:1px; width:1px; position:relative; top:1px; left:0px; background-color:#8894a8;}");
HttpContext.Current.Response.Write("#loader_bg {background-color:#e4e7eb; position:relative; top:8px; left:8px; height:7px; width:113px; font-size:1px;}");
HttpContext.Current.Response.Write("</style>");
HttpContext.Current.Response.Write("<div id=loader_container>");
HttpContext.Current.Response.Write("<div id=loader>");
HttpContext.Current.Response.Write("<div align=center>页面正在加载中 ...</div>");
HttpContext.Current.Response.Write("<div id=loader_bg><div id=progress> </div></div>");
HttpContext.Current.Response.Write("</div></div>");
HttpContext.Current.Response.Flush();
}
#endregion
}

之后在需要调用的页面中在Page_Load()时间调用该方法：

Common.initJavascript();

并在每个页面body加载完毕后调用隐藏该div的事件

完毕！

类别：.net |

| 添加到搜藏 | 分享到i贴吧 | 浏览( 5941) | 评论 ( 35)

上一篇：厦门一角下一篇： VB PostMessage 向Windows窗口发...

最近读者：

	登录后，您就出现在这里。
		zsm890975	cndhqwfn1	圣罗兰赛龙夺锦	postdep	lucky_ltz	zhujinhu21	pong007	temp9642

网友评论：

Dolet

2008-05-13 12:39 | 回复

哈哈，好了，是我的失误，谢谢这么好的东东

sparkwong

2008-05-14 21:21 | 回复

谢谢赏光欢迎多多互相交流，^_^

网友: fengyudong

2008-05-28 10:46 | 回复

你好: 我刚才试了,"提示正在加载的信息"只是一闪就过去了,还是出现加载中的空白页! 谢谢!

fengyudong1

2008-05-28 10:50 | 回复

remove_loading()里面的内容是???

sparkwong

2008-05-28 11:00 | 回复

一闪过去很正常，证明你的页面内容都加载好了你要确认你的页面有些东西加载比较慢的话，你就可以看到效果了 remove_loading()在initJavascript()里

sparkwong

2008-05-28 19:08 | 回复

没错啊，你现在没效果吗？

tangjun0102

2008-06-03 13:48 | 回复

非常感谢，找了两天才找到你这个！累死我了！顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶

网友: 谢谢

2008-06-13 15:32 | 回复

问一下，为什么我用了这个效果后，定义的样式CSS就没效果了。谢谢

网友: 谢谢

2008-06-13 16:08 | 回复

问一下，为什么我用了这个效果后，定义的样式CSS就没效果了。谢谢请关注下，谢谢谢谢再次谢谢，呵呵~

网友: 你好

2008-06-13 16:50 | 回复

你有QQ吗？或邮箱也行啊

sparkwong

2008-06-13 17:45 | 回复

因为这一段里面也有定义css的样式有可能是你定义的css样式与之同名冲突了

网友: 谢谢

2008-06-14 15:51 | 回复

谢谢

匿名网友

2008-06-17 15:52 | 回复

能否加载一个带图片的呢？

sparkwong

2008-06-17 20:48 | 回复

当然可以，在css里加个背景图就可实现

Ablan_wang

2008-08-06 17:35 | 回复

好东东，转载了！

网友: lavender

2008-08-11 14:51 | 回复

好，牛

网友: eaglet

2008-09-19 15:06 | 回复

http://218.68.3.131/ ajax 个性化应用

网友: zx

2008-09-23 16:08 | 回复

HttpContext.Current.Response.Write(); HttpContext.Current.Response.Flush(); 这个会破坏我的css的还有其他方法吗谢谢哦

网友: xxx

2008-09-23 17:43 | 回复

这个太麻烦了吧，一张GIF图片就可以搞定的事情，为什么传那么多东东到客户端呢？直接在要用到效果的页面放一个层里面加个GIF图片，然后在服务端找的这个层，在onload的时候显示，在onprerender的时候隐藏应该可以，没试过··· 这load效果一般都用ajax来做，不过还是顶楼主一下，另外，，，把那些发到客户端的代码用stringbuilder先构造一下，一个Writer就可以发过去了，你的写法有点难看哦

sparkwong

2008-09-24 11:09 | 回复

to zx:没太听明白你的意思，^_^ to xxx： 1、这段代码是js的效果，本就不想加张图片上去，想绿色点，^_^ 2、 StringBuilder不一样得先.Append吗？难道用Append后面加一串东西就比这好看？ 3、谢谢您的宝贵意见，欢迎交流

网友: zx

2008-09-28 08:11 | 回复

to 楼主用了HttpContext.Current.Response.Write();以后会无效导致CSS无效你可以试一下 CSS 会不起作用的

wbxf2008

2009-06-17 17:02 | 回复

兄弟我试了一下，但是一直显示的是正在加载数据，等了半天也没把数据显示出来。能贴个完整的引用例子出来吗？

匿名网友

2009-09-22 19:40 | 回复

回复xxx：怎么放图片呢？另外加载时弄否是透明的啊？

匿名网友

2009-09-22 19:42 | 回复

我是在软件中使用，比如单击一个事件然后要处理一些业务较慢。想用这个给用户提示正在处理中，打算用个GIF图片。我用目前的，只要这个加载出来了，原来的页面就都看不见了。

longkin_wl

2010-02-08 17:04 | 回复

有待测试啊：初步发现，在Ajax中会出问题，问题就是输出的标签在html以外了。
不过还是很不错的！

网友: gonganruyi

2010-02-24 11:40 | 回复

楼主您好，使用这段代码后页面原本的css样式会失效！

sparkwong

2010-02-24 14:09 | 回复

回复gonganruyi：
那是你有些css和现在的css效果重叠了

yeagen

2010-03-28 20:59 | 回复

用Response.Write会输出到页面就顶部，破坏了HTML结构，所以就出错了，我也在找完美的解决方法，可是找不到

wukaiping

2010-06-18 11:01 | 回复

for Example:
StringBuilder Builder = new StringBuilder();
Builder.Append(" <script language=JavaScript type=text/javascript>");
Builder.Append("var t_id = setInterval(animate,20);");
Builder.Append("var pos=0;var dir=2;var len=0;");
Builder.Append("function animate(){");

.....
...
..
return Builder.ToString();

wukaiping

2010-06-18 11:03 | 回复

然后在页面加载时

ClientScript.RegisterClientScriptBlock(page.GetType(), "", Builder.ToString());

wukaiping

2010-06-18 11:03 | 回复

这样就不会破坏css结构了