loading indicator(页面装载指示器)

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

系统使用jsonrpc 和 dojo framework。
line 1， 在getItems 请求之前打开indicator。line 2，在callback方法执行后去隐藏indicator。
这里的indicator其实很简单，就是使用了dojo的dialog widget，觉得这个widget刚好合适做indicator，因为他可以让背景变灰而且不可编辑。然后在dialog上放一个loading的gif图片就是了。简单吧。下面是html页面的dialog的定义。

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

js 代码

 

1. dojo.addOnLoad(function(){  
2.     
   
3.     //After page loaded, we change the body to show and hide the indicator.  
4.     var loadIndicator = document.getElementById("loadIndicator");  
5.     if (loadIndicator!=null){  
6.         loadIndicator.style.display="none";  
7.     }  
8.     var readerContainer = document.getElementById("reader-container");  
9.     if (readerContainer!=null){  
10.         readerContainer.style.display="block";  
11.     }         
12. });  

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