自己制作一个等待加载的一个效果

最近做项目遇到一个要求要做这么一个效果:

        由于现在这个系统进主界面要展开一棵树，当时用的DHTMLTree,当树的节点数大于1000的时候，展开就非常慢，这时就需要做个加载中这么的一个效果，这么做呢，最开始我也查了很多资料，但是都不合适，后来被小弟慢慢弄，做出来了。

         其实挺简单的，就是一个div层的控制和运用，由于我们树是通过后台拼xml的方式生成的，在页面上有个树的div层

       <div id="departmentTree" style["....这里就省略了...."></div> // 这个层是显示树用的层

        这时候为了做出这个动态加载的效果，可以在这个div下加一个div，控制树的异步加载，主要用到的就是ajax和js。

       控制层的div为：

       <div id="hiddenDiv" style="position:absolute;z-index:1"></div> // 这个层是加载层，到时候调节这个div的大小宽度和显示树用的层一样就oK

       做到这就差不多了 ，然后开始写js代码

       根据业务逻辑需求，一进页面显示一个“加载中，请稍后...”的这么一个效果，所以开始要把树隐藏掉，显示加载层，最后要显示树层，js代码：

        function hiddenTreeDiv(){

                 document.getElementById("departmentTree").style.display = "none";    // 隐藏

        }

         function displayHiddenDiv(){

                document.getElementById("hiddenDiv").style.display = "block";    // 显示加载层

         }

         function displayHiddenDiv(){

                document.getElementById("hiddenDiv").style.display = "block";    // 隐藏加载层

         }

        function displayTreeDiv(){

                 document.getElementById("departmentTree").style.display = "block";    // 显示树层       

        }

       这里就差不多了，页面加载就执行这些方法，代码如下：

       var window = onload(){

              hiddenTreeDiv();

             displayHiddenDiv();

            displayTreeDiv();

            displayHiddenDiv();

        };

        这样就OK了，是不是很简单？呵呵，小菜鸟初次投稿，勿喷。有不对的地方请大家指教，当然 ，这代码是我随手写的，具体的地方还要大家自己想想。

        大概的方向就这样。