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

原创 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了,是不是很简单?呵呵,小菜鸟初次投稿,勿喷。有不对的地方请大家指教,当然 ,这代码是我随手写的,具体的地方还要大家自己想想。

        大概的方向就这样。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Android自定义view之环形等待控件的实现

本篇博客参考鸿洋_大神的《Android 自定义View (三) 圆环交替 等待效果》 拖了这么久才开始更新csdn,着实是懒到家了,写这篇博客的目的就是为了帮助更多的android入门开发者更...
  • xuejiawei123
  • xuejiawei123
  • 2015年10月12日 16:34
  • 6122

Winform应用程序实现加载等待(C#)

.NET Winform应用程序中,要实现加载等待的动画效果需要借助于ImageAnimator类,该类可实现多帧图像的动画处理显示。该类的主要的方法如下:  public static void A...
  • dingtongqin
  • dingtongqin
  • 2016年01月27日 11:37
  • 7588

jquery简单实现表单提交后的需要等待效果

简单来说就是遮罩然后加载个动画,往上有利用js手动更改html值实现缓冲动画的,比较麻烦,感觉性价比不高,毕竟谁也不会没事一直在那加载很多张这种等待动画。 主要也就是利用了position里面的fi...
  • jimoluoxue201
  • jimoluoxue201
  • 2016年01月05日 16:37
  • 2961

VC++制作的文字逐句显示特效 一个VC++制作的文字逐句显示特效,在网页我们经常见到,比较普通的一款文字显示效果,本程序同时还实现了视图背景的加载,采用定时器实现对句子的逐句显示,使你的程序富有动态效果。

  • 2010年02月11日 19:18
  • 343KB
  • 下载

一个很酷的加载loading效果

  • 2017年04月25日 15:07
  • 3.41MB
  • 下载

一个不错的页面加载效果类

  • 2008年08月29日 17:54
  • 101KB
  • 下载

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

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

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

一、通过动画实现 定义res/anim/loading.xml如下: xmlns:android="http://schemas.android.com/apk/res/android">    ...
  • ch1406285246
  • ch1406285246
  • 2016年08月15日 14:48
  • 1436

mel加载一个物体不同姿态的模型实现动画效果

题目,我从VS导出一个物体的不同姿态生成一系列obj文件 然后想通过MAYA MEL来实现这一系列的动画 script如下: global proc loadObjs() { st...
  • seamanj
  • seamanj
  • 2015年12月18日 22:50
  • 626

一个很酷的加载loading效果

一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view, 本例子主要由以下几点构成 (1):RotateAnimation实现叶子旋...
  • zhuqihe02
  • zhuqihe02
  • 2015年11月18日 16:52
  • 162
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自己制作一个等待加载的一个效果
举报原因:
原因补充:

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