自己制作一個等待加載的一個效果

最近做項目遇到一個要求要做這麼一個效果:

        由于現在這個系統進主界面要展開一棵樹，當時用的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了，是不是很簡單？呵呵，小菜鳥初次投稿，勿噴。有不對的地方請大家指教，當然 ，這代碼是我随手寫的，具體的地方還要大家自己想想。

        大概的方向就這樣。