loading indicator(页面装载指示器)

dengyin2000

浏览: 1225539 次
性别:
来自: 广州

最近访客更多访客>>

jis117

b0r0j082

txlong_onz

flyshadowhan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

Dojo Ajax Webwork Gmail JSP

1。在许多ajax应用中，当页面提交了ajax请求时，都希望能通知用户系统正在操作中，比如gmail在右上角显示一个loading字样。其实这个并不算是一个难点，我们只需要在ajax请求前去display indicator，在ajax返回请求（callback）后去hide indicator就行。

系统使用jsonrpc 和 dojo framework。

js 代码

dojo.event.connect("before", jsonrpc.subscribe, "getItems", showIndicator);
dojo.event.connect("after", this, "callbackGetItems", hideIndicator);

line 1，在getItems 请求之前打开indicator。line 2，在callback方法执行后去隐藏indicator。

js 代码

function showIndicator(){
// show indicator
try{
dojo.widget.byId('IndicatorContent').show();
}catch(e){
}
}
function hideIndicator(){
// hide indicator
try{
dojo.widget.byId('IndicatorContent').hide();
}catch(e){
}
}

这里的indicator其实很简单，就是使用了dojo的dialog widget，觉得这个widget刚好合适做indicator，因为他可以让背景变灰而且不可编辑。然后在dialog上放一个loading的gif图片就是了。简单吧。下面是html页面的dialog的定义。

xml 代码

<div dojoType="dialog" style="border: 0px" id="IndicatorContent" bgOpacity="0.5" toggle="fade" toggleDuration="250">
<table border="0">
<tr valign="middle">
<td style="border: 0px"><div class="indicator">Loading...</div></td>
</tr>
</table>
</div>

2。因为我们做的是ajax应用，页面中包含了大量的js，使页面变得非常庞大，如果使用了dojo而且使用他的大量的widget的话，即使是download完了整个的页面，dojo也需要在page onload里面做大量的工作。这样就会让整个页面render花费大量的时间。在这里加上个indicator是个不错的选择。但是因为第一次load page并不是通过ajax，可能你是使用structs，webwork，jsp。这就让加上一个指示器加上了一些难度。我们需要怎样才能处理呢？经过跟工作组一些同时的讨论，想到了一个算是非常简单的方法。在最靠近bdoy的地方加上一个div，加上你想显示的效果。如下：

xml 代码

<body id="body-reader-view" jwcid="@Body" style="height: 100%">
<div id="loadIndicator" style="position:absolute;width:100%;height:100%;z-index=999;background-color: black;text-align: center;vertical-align: middle;opacity:0.50;filter:alpha(opacity=50)">
<table border="0" style="width:100%;height:100%;">
<tr valign="middle">
<td align="center"><div class="indicator">Loading..</div> </td>
</tr>
</table>
</div>

然后把你下面所有的html元素的style设成display:none，如果太多的话，可以用一个div把他们包含起来，然后把这个div设成不可见。然后我们需要在page onload里面把显示的元素换一下就行。把loadIndicator变成display:none，把他下面的html 元素变成display:block就ok了。简单吧。

js 代码