`
dengyin2000
  • 浏览: 1228590 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

loading indicator(页面装载指示器)

    博客分类:
  • ajax
阅读更多
1。在许多ajax应用中,当页面提交了ajax请求时,都希望能通知用户系统正在操作中,比如gmail在右上角显示一个loading字样。其实这个并不算是一个难点,我们只需要在ajax请求前去display indicator,在ajax返回请求(callback)后去hide indicator就行。

系统使用jsonrpc 和 dojo framework。
js 代码
 
  1. dojo.event.connect("before", jsonrpc.subscribe, "getItems", showIndicator);  
  2. dojo.event.connect("after"this"callbackGetItems", hideIndicator);   
line 1, 在getItems 请求之前打开indicator。line 2,在callback方法执行后去隐藏indicator。
js 代码
 
  1. function showIndicator(){  
  2.     // show indicator  
  3.     try{  
  4.             dojo.widget.byId('IndicatorContent').show();  
  5.     }catch(e){  
  6.       
  7.     }  
  8. }  
  9.   
  10. function hideIndicator(){  
  11.     // hide indicator  
  12.     try{  
  13.         dojo.widget.byId('IndicatorContent').hide();  
  14.     }catch(e){  
  15.       
  16.     }  
  17. }  
这里的indicator其实很简单,就是使用了dojo的dialog widget,觉得这个widget刚好合适做indicator,因为他可以让背景变灰而且不可编辑。然后在dialog上放一个loading的gif图片就是了。简单吧。下面是html页面的dialog的定义。
xml 代码
 
  1. <div  dojoType="dialog" style="border: 0px" id="IndicatorContent" bgOpacity="0.5" toggle="fade" toggleDuration="250">  
  2.         <table border="0">  
  3.             <tr  valign="middle">  
  4.                 <td style="border: 0px"><div class="indicator">Loading...</div></td>  
  5.             </tr>  
  6.         </table>  
  7. </div>  

2。因为我们做的是ajax应用,页面中包含了大量的js,使页面变得非常庞大,如果使用了dojo而且使用他的大量的widget的话,即使是download完了整个的页面,dojo也需要在page onload里面做大量的工作。这样就会让整个页面render花费大量的时间。在这里加上个indicator是个不错的选择。但是因为第一次load page并不是通过ajax,可能你是使用structs,webwork,jsp。这就让加上一个指示器加上了一些难度。我们需要怎样才能处理呢? 经过跟工作组一些同时的讨论,想到了一个算是非常简单的方法。在最靠近bdoy的地方加上一个div,加上你想显示的效果。如下:
xml 代码
 
  1. <body id="body-reader-view" jwcid="@Body" style="height: 100%">  
  2. <div id="loadIndicator"  style="position:absolute;width:100%;height:100%;z-index=999;background-color: black;text-align: center;vertical-align: middle;opacity:0.50;filter:alpha(opacity=50)">  
  3.         <table border="0" style="width:100%;height:100%;">  
  4.             <tr valign="middle">  
  5.                 <td align="center"><div class="indicator">Loading..</div> </td>  
  6.             </tr>  
  7.         </table>  
  8. </div>  
然后把你下面所有的html元素的style设成display:none,如果太多的话,可以用一个div把他们包含起来,然后把这个div设成不可见。然后我们需要在page onload里面把显示的元素换一下就行。把loadIndicator变成display:none,把他下面的html 元素变成display:block就ok了。 简单吧。
js 代码
 
  1. dojo.addOnLoad(function(){  
  2.     
  3.     //After page loaded, we change the body to show and hide the indicator.  
  4.     var loadIndicator = document.getElementById("loadIndicator");  
  5.     if (loadIndicator!=null){  
  6.         loadIndicator.style.display="none";  
  7.     }  
  8.     var readerContainer = document.getElementById("reader-container");  
  9.     if (readerContainer!=null){  
  10.         readerContainer.style.display="block";  
  11.     }         
  12. });  
这里用的是dojo的onload,这里你可以换成在body 的onload事件里面处理就行了。
  • 大小: 156 KB
分享到:
评论

相关推荐

    前端开源库-loading-indicator

    加载指示器(Loading Indicator)是一种视觉反馈机制,它在应用程序执行异步操作,如加载数据或执行计算时显示。通过使用`loading-indicator`,开发者可以轻松地为他们的前端项目添加这些指示器,确保用户在等待过程...

    Flutter CircularProgressIndicator进度指示器/Loading

    一种材料设计循环进度指示器,它旋转表示应用程序正在忙。 可用于Loading显示,也可以用作进度显示

    pagerindicatorVIewpager的指示器

    然而,为了提供更好的用户体验,我们通常会为`ViewPager`添加指示器(Indicator),`PagerIndicator`就是这样的一个组件,它可以帮助用户知道当前在哪个页面以及总共有多少页面。`PagerIndicator`通常是与`ViewPager...

    仿网易新闻上部 多图滑动切换指示器 indicator

    【标题】:“仿网易新闻上部 多图滑动切换指示器 indicator” 在移动应用设计中,用户界面的用户体验和视觉吸引力是至关重要的。网易新闻作为一款知名的新闻资讯应用,其设计元素往往受到开发者和设计师的关注。...

    ViewPagerIndicator,一、viewpager indicator,viewpager指示器.zip

    适配器需要继承PagerAdapter,并重写必要的方法,比如`getCount()`以返回页面数量,`getPageTitle(int position)`用于返回每个页面的标题,这通常会与指示器上的标记对应。 此外,ViewPagerIndicator还支持自定义...

    viewpager页面指示器

    然而,为了提供更好的用户体验,通常我们会为ViewPager添加一个页面指示器,以直观地显示当前页面的位置以及总页面数。本项目"viewpager页面指示器"正是针对这一需求而设计的,它提供了自定义的解决方案,无论是否有...

    d-loading-indicator:加载指示器Derby组件

    在前端开发中,加载指示器(Loading Indicator)是一种常见的用户界面元素,用于向用户显示应用程序或数据正在加载的过程。在本话题中,我们将深入探讨"Derby组件"中的"D-loading-indicator",这是一个专为...

    基于Bootstrap 3内置loading指示器的提交按钮特效

    加载指示器(Loading Indicator)是网页设计中一种常见的交互元素,它告诉用户系统正在进行后台处理,如数据提交或加载新内容。Bootstrap 3 提供了多种风格的loading指示器,让开发者能够根据项目需求选择合适的视觉...

    ViewPager Indicator自定义标题和指示器样式

    本教程将深入讲解如何自定义ViewPager的Indicator样式,以及如何实现标题和指示器样式的个性化定制,同时确保与滑动逻辑解耦。 首先,我们来看ViewPager的基础用法。ViewPager允许我们在一个视图内展示多个Fragment...

    nativescript-loading-indicator, 带有NativeScript选项的进度/加载指示器 iOS Android.zip

    loading-indicator, 带有NativeScript选项的进度/加载指示器 iOS Android nativescript-loading-indicatornativescript-loading-indicator 是NativeScript的一个插件,它覆盖了当前页面上的加载指示器。 例如,在从...

    indicator指示器

    在Android开发中,Indicator通常指的是页面指示器,用于在ViewPager中显示当前页面的状态,比如在TabLayout中常见的小圆点或者线条。ViewPager是一种强大的视图切换工具,它允许用户通过左右滑动来浏览多个页面。当...

    unity摇杆,技能指示器,滑屏控制演示

    接下来是“技能指示器”(Skill Indicator)。在Unity中,技能指示器可以是简单的箭头、扇形或者圆形图形,用以显示玩家即将释放的技能方向和范围。通常,这些指示器由预制体创建,可以在需要时实例化并在使用后销毁...

    preloader是一款小巧的jQuery页面预加载loading指示器插件

    3. **加载指示器(Loading Indicator)**:加载指示器是一种视觉反馈,通常是一个动画效果,展示给用户,表示页面内容正在加载。它可以是一张静态图片,也可以是一段动态动画。 **二、preloader插件的使用步骤** 1...

    android ViewPager指示器

    而ViewPager指示器则是与ViewPager配合使用,用以显示当前所选页面的状态,通常是通过小圆点或其他图形来直观地表示。在本教程中,我们将深入探讨如何在Android应用中实现一个简单的ViewPager指示器,并通过一行代码...

    53种纯CSS3炫酷loading指示器动画特效

    在网页设计中,加载指示器(Loading Indicator)是不可或缺的一部分,它向用户显示内容正在加载,提高用户体验。本文将深入探讨“53种纯CSS3炫酷loading指示器动画特效”,这些特效展示了CSS3的强大功能和无限创意。...

    纯文本Loading加载指示器特效

    "纯文本Loading加载指示器特效"是一种创新的设计理念,它将传统的图形化加载指示器转变为更具可读性和简洁性的文本形式,给用户带来不一样的视觉体验。 加载指示器,通常被称为Loader或Progress Indicator,是在...

    tablayout的自定义tab和自定义指示器

    默认的指示器可能无法满足所有设计需求,我们可以通过自定义`TabLayout`的`Indicator`实现定制。首先,创建一个继承`TabLayout.ViewPagerIndicator`的类,重写其中的方法来绘制指示器。然后,通过`tabLayout....

    android viewpager 左右无限循环滑动 + 小圆点指示器

    - 为ViewPager设置`OnPageChangeListener`,监听页面变化事件,当页面改变时,更新指示器中对应小圆点的状态。 3. **将无限循环的ViewPager和自定义指示器结合**: - 在你的Activity或Fragment中,实例化`...

    Android Tablayout 的Indicator 长度和样式的修改

    1. 指示器长度与文字长度相等: 这种情况下,TabLayout默认行为就能满足需求,因为它会自动根据文字内容的宽度来设置Indicator的长度。如果需要进一步微调,可以自定义TabLayout的TabView,重写`onDraw()`方法,...

    ViewPager滑动跟随的指示器

    2. **指示器(Indicator)**:指示器是视觉提示,通常位于ViewPager下方,用于表示页面数量和当前选中页面。常见的指示器类型有圆点型、线条型等,通过颜色变化或形状变化来突出当前页面。开发者可以通过自定义View...

Global site tag (gtag.js) - Google Analytics