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

原创 2012年03月24日 16:43:15

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

        由于现在这个系统进主界面要展开一棵树,当时用的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了,是不是很简单?呵呵,小菜鸟初次投稿,勿喷。有不对的地方请大家指教,当然 ,这代码是我随手写的,具体的地方还要大家自己想想。

        大概的方向就这样。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

一个很酷的加载loading效果

  • 2017-04-25 15:07
  • 3.41MB
  • 下载

利用PreLoader实现一个平视显示(HUD)效果(可以运用到加载等待效果),并进行简单的讲解

什么是PreLoader? PreLoader是由Volodymyr Kurbatov设计的一个很有意思的HUD(平视显示效果(Head Up Display)),通过运动污点和固定污点之间的粘黏动画...

三种方式实现自定义圆形页面加载中效果的进度条,包含一个好看的Android UI

一、通过动画实现 定义res/anim/loading.xml如下: xmlns:android="http://schemas.android.com/apk/res/android">    ...

一个漂亮的视图预加载效果。

一个漂亮的视图预加载效果。

一个简单的等待加载框

项目中在进行耗时操作时,譬如网络请求,经常需要使用加载框,以下为一个简单的等待加载框的实现。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)