loading indicator(页面装载指示器)

解晟睿

2023-12-01

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 代码

dojo.addOnLoad(function(){
//After page loaded, we change the body to show and hide the indicator.
var loadIndicator = document.getElementById("loadIndicator");
if (loadIndicator!=null){
loadIndicator.style.display="none";
}
var readerContainer = document.getElementById("reader-container");
if (readerContainer!=null){
readerContainer.style.display="block";
}
});

这里用的是dojo的onload，这里你可以换成在body 的onload事件里面处理就行了。

loading indicator(页面装载指示器)

相关阅读

相关文章

相关问答

相关文档