javascript - 怎样监测页面中所有的EasyUI控件是否全部加载完成！

Question

是这样，最近遇到一个问题，我在一个页面中大量的使用到了EasyUI的控件，例如Datagrid，combobox，textbox等等，但是这些控件有的需要从服务器拉去数据才能成功初始化，但是现在有一个问题就是，如果用的网速比较差，就会导致页面虽然加载出来了，但是EasyUI的一些控件没有加载完成。。。。。。这样用户再点某些下拉框的时候就会出现没有数据可以选择的问题！

我现在想的就是，进到页面的时候先弹一个框，显示页面正在加载中，然后等所有的控件加载完成之后再把这个框给关掉！
但是我现在没想到该怎么检测什么时候这些控件会都加载完成（因为这些控件都是异步加载数据，没办法用返回值来判断！）
我现在的做法就是，让这些控件依次加载：
例如
先加载datagrid ，datagrid加载完成之后，再加载combobox，combobox加载完成之后再加载textbox，等最后一个控件加载完成之后再把等待框给关掉！
但是这样治标不治本。。。虽然能实现目的，但是很大程度上限制了网站的性能！
所以不知道大家在遇到这样的问题的时候是怎么处理的呢？？

Answer 1

提供个思路， 定个全局的变量：

javascriptvar _load_status={datagrid:false,combobox:false,textbox:false};

当一个组件加载完成后 去设置 _load_status 下的属性为 true；

全局 setInterval 去检查 _load_status里每个属性是否变为true；
完成后记得 clearInterval

Answer 2

1)可以吧Ajax加载数据的过程,自己封装,获取数据后再把数据赋给相应的控件,控件有相应的设置数据的方法接口
2)如果数据还没有加载完成,控件有相应的loading提示信息
3)按页面交互方式,可以把少量的数据在页面初始化时就加载到页面上,combox/text等,没有必要全部通过Ajax请求获取;

Answer 3

http://api.jquery.com/Ajax_Events/ ajaxStop事件。