Web应用中实现页面加载提示

brofe

浏览: 233470 次
性别:
来自: 上海

最近访客更多访客>>

wangsw15

vicento4

chenliangian

Amyxiu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaSript

Web 应用服务器 Firefox IE YUI

在Java Web应用中，当加载一个动态页面时及JSP页面时，如果页面动态数据较多，会有很长一段时间的空白页面，古加上这个页面正在加载的提示，使得应用更加人性化。

processbar.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>process bar</title>
		<script type="text/javascript" language="JavaScript">
			
			//: 判断网页是否加载完成
			document.onreadystatechange = function () { 
				if(document.readyState=="complete") { 		
	    			document.getElementById('divprogressbar').style.display='none'; 
	    		}
			} 
			
		</script>
	</head>
	<body>
		<div id="divprogressbar"
			style="position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; background-color: #ffffff; filter: alpha (     opacity =     100 ); z-index: 50000">
			<div style="text-align: center; padding-top: 200px">
				<table align="center" border="1" width="37%" cellspacing="0"
					cellpadding="4" style="border-collapse: collapse" bgcolor="#FFFFEC"
					height="87">
					<tr>
						<td bgcolor="#3399FF" style="font-size: 12px;" height="24"
							align="center">
							友情提示, 数据正在载入中...
						</td>
					</tr>
					<tr>
						<td style="font-size: 12px; line-height: 200%" align="center">
							网页正在载入数据中.请耐心等待...
							<marquee style="border: 1px solid #000000" direction="right"
								width="300" scrollamount="5" scrolldelay="10" bgcolor="#ECF2FF">
								<table cellspacing="1" cellpadding="0">
									<tr height=8>
										<td bgcolor=#3399FF width=8></td>
										<td></td>
										<td bgcolor=#3399FF width=8></td>
										<td></td>
										<td bgcolor=#3399FF width=8></td>
										<td></td>
										<td bgcolor=#3399FF width=8></td>
										<td></td>
									</tr>
								</table>
							</marquee>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

然后在另外需要使用的页面中加入如下代码即可：

<jsp:include page="processbar.jsp"></jsp:include>

注意哦， 只有当页面加载真的需要花费时间的时候才会看到效果。

progressbar.rar (1 KB)
描述: 一个简单的HTML测试页面。为了便于效果的演示，该页面中的加载提示永远不会消失，可以修改一下页面中的JS代码。
下载次数: 845

查看图片附件

24
顶

10
踩

分享到：

Java 实现MD5 加密 | Log4j 学习笔记

2008-07-28 21:58
浏览 17784
评论(35)
分类:Web前端
查看更多

35 楼 guoliming365 2011-03-07

顶效果不错！

34 楼 shanfeng1 2010-05-20

有点可惜不支持FF

33 楼 imp9527 2008-08-02

可以看下 DWR 的实现

32 楼 layer555 2008-08-02

呵呵可以参考下YUI的panel实现啊，里面应该有对于浏览器的检测之类的，而且我们现在基本上都是使用它来完成等待界面的，也挺漂亮，如果还觉得不满意可以修改YUI的源码啊。。。

31 楼 javaheart 2008-08-02

opera 9.51 通过
firefox 似乎。。

30 楼 brofe 2008-08-01

suko,执行操作也可以，看你如何运用了。

29 楼 h521999 2008-08-01

呵呵...还不错值的学习!

28 楼 suko 2008-08-01

我的页面有一个连接，点击该连接以后，后台服务器会执行一系列的操作，花费时间比较长，我也想用这个进度条提示，我试了下好像没效果。是不是只有在加载页面的时候，才可以看到效果，而执行操作就不行呢？

27 楼 wucc1986 2008-08-01

ie6都不行？

26 楼 shenxiaolei 2008-07-31

bu错！

25 楼 mapgis 2008-07-31

最好能支持下 FireFox：）

24 楼 guooo 2008-07-31

好东西啊,哈哈

23 楼 java55 2008-07-31

收藏以备后用，谢谢

22 楼 andy54321 2008-07-31

拿下了
好东西，用得上

21 楼 brofe 2008-07-31

spark83217

这位朋友，不能用的东西我是不会放上来的。我也是在IE7上测试的。

20 楼 spark83217 2008-07-31

好像不管用吧，那个加载条一直不出，刚开始时页面是白的,页面所有东西加载完了页面才显示东西，这时候加载条就不显示了。我在IE7中试的

19 楼 brofe 2008-07-31

“用了两个ie专有属性，其它浏览器上无效”

你有好的想法吗，供我参考改进呀！

18 楼 brofe 2008-07-31

"效果不错,收藏!
不过想问下,能不能做到真正地与背后的数据加载过程同步,从而以百分比的形式显示出来?从而达到进度条的效果.
"

//: 判断网页是否加载完成
            document.onreadystatechange = function () {
                if(document.readyState=="complete") {
                    .....
                }
           }

这段话应该就是这个意思吧。

17 楼 tangshuo 2008-07-31

不错，谢谢了！

16 楼 e_sky 2008-07-31

学习，好东西 .....

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论