数据加载_数据加载动画 - CSDN
精华内容
参与话题
  • 设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载中的设计,所以会导致我们看到的APP,...

    设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载中的设计,所以会导致我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态。那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以轻松自在的享受等待,对加载后的内容有明确的预期呢?
    今天这篇文章,会介绍6种常见的加载模式设计,和3种减少等待感的具体手法,希望对追求极致体验的产品人有帮助。

    一、6种常见的数据加载模式

    目前APP设计中,合理的数据加载方式,主要分如下六种:1.全屏加载 2.优先加载 3.整页加载 4.自动加载 5.智能加载  6.离线加载,这六种方式,适用于不同的需求场景,也适用于不同类型的APP,让我们来一一解读。

    加载模式

    加载模式

    1. 全屏加载

    全屏加载就是整个屏幕白屏进行数据加载,一般会有菊花转配合,常用于手机网页的加载中。

    加载模式加载模式

    网易新闻                                                                        Feedly

    优点是能保证内容的整体性,全部加载完才能够系统化的阅读。
    缺点比较明显,就是有非常强烈的等待感,3s以上会产生焦躁情绪,所以在地铁等信号不好的地方,使用手机网页获取内容实在是比较灾难的一件事情。
    一般这种情况会配合有明确进度标识的进度条。

    2.优先加载

    如果一个页面有图片有文字,加载图片比较慢的情况下,可以先把文字都加载出来,保证用户可以顺畅阅读,然后再加载比较费流量的图片。如果是用这一种加载方式,活动页什么的,千万不能重要信息全部放在头图上,导致加载不出来。重要操作也不能用图片按钮,否则也会有操作显示不出来的风险。

    加载模式 加载模式

    淘宝                                                                                              网易新闻
    优点是可以帮助用户快速阅读内容,了解信息。
    缺点是也许会丢失掉重要的关键信息,无法建立信息获取的闭环。
    这种加载形式更加适用于内容阅读型的APP。

    3.整页加载

    当当前页与下一页是整页切换的时候,可以考虑采用整页加载的形式,但是要保证每个页面的数据量不是特别的大。
    优点是能保证每个页面的完整性,体验比较整体。
    缺点是不好保证整页的加载效率,且有可能影响浏览的流畅度。

    一般适用于宫格图片模式、全屏图片模式、网状详情页模式。


    余下全文点此查看

    展开全文
  • 无标题文档      $(document).ready(function() {    $("#dataLoad").hide();... $("#showLoadingDiv").click(function(){$("#dataLoad").show();... //为指定按钮添加数据加载动态显示:即将DIV显示出来
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>


      <script type="text/javascript">
     
       $(document).ready(function() {
     
        $("#dataLoad").hide(); //页面加载完毕后即将DIV隐藏
     
        $("#showLoadingDiv").click(function(){$("#dataLoad").show();}); //为指定按钮添加数据加载动态显示:即将DIV显示出来
     
       });
     
      </script>
    </head>
     
      <div id="dataLoad" style='display:none'><!--页面载入显示-->
     
       <table width=100% height=100% border=0 align=center valign=middle>
     
        <tr height=50%><td align=center>&nbsp;</td></tr>
     
        <tr><td align=center><img src="C:\Users\lkm\Desktop\935f3fc59d18c9aa89d7b9bd565a1381.gif"/></td></tr>
        <tr height=50%><td align=center>&nbsp;</td></tr>
     
       </table>
     
      </div>
    <input type="button"  id="showLoadingDiv" value="查询"> 
    <body>
    </body>
    </html>
    展开全文
  • 数据加载

    2019-03-09 19:17:22
    圆周运动 &lt;style&gt; .ball { width: 10px; height: 10px; background-color: deepskyblue; position: absolute; border-radius: 5px...

    圆周运动

     <style>
            .ball
            {
                width: 10px;
                height: 10px;
                background-color: deepskyblue;
                position: absolute;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <script>
            var arr=[];
            var r=30;
            var time=4;
            init();
            function init() {
                animation()
            }
    
            function createBall(alpha) {
               var ball=document.createElement("div");
                ball.className="ball";
                ball.style.opacity=alpha;
                document.body.appendChild(ball);
                ball.angle=0;
                arr.push(ball);
            }
    
            function animation() {
                requestAnimationFrame(animation);
                for(var i=0;i<arr.length;i++){
                    update(arr[i]);
                }
                time--;
                if(time>0 || arr.length>15) return;
                createBall(1-arr.length*0.08);
                time=4;
            }
    
            function update(elem) {
                elem.angle+=5;
                if(elem.angle===360) elem.angle=0;
                var speedX=Math.sin(elem.angle*Math.PI/180)*r;
                var speedY=Math.cos(elem.angle*Math.PI/180)*r;
                elem.style.left=(document.documentElement.clientWidth-elem.offsetWidth)/2+speedX+"px";
                elem.style.top=(document.documentElement.clientHeight-elem.offsetHeight)/2+speedY+"px";
            }
        </script>
    
    展开全文
  • 数据加载中...请稍后(js一句代码)

    千次阅读 2019-01-10 09:44:54
    数据加载中,请稍候..."); 查询之后加一句: $.loading(false, "数据加载中,请稍候..."); ajax: 案例: function GetForeSearch() { //获取参数 var citys = $("#citys_id option:...

    在查询的之前加一句:

    $.loading(true, "数据加载中,请稍候...");

    查询之后加一句:

    $.loading(false, "数据加载中,请稍候...");

    ajax: 案例:

        function GetForeSearch() {
            //获取参数
            var citys = $("#citys_id option:selected").val();
            var region = $("#region_id option:selected").val();
    
            $.loading(true, "数据加载中,请稍候...");
            $.ajax({
                type: "POST",
                data: {
                    citys: citys,
                    region: region
                },
                url: "GetYdSweet",
                dataType: "JSON",
                success: function (data) {
                    $.loading(false, "数据加载中,请稍候...");
                }
            });
        }
    展开全文
  • 数据加载速度最大化

    2016-09-06 18:51:12
    问题描述:尽快的加载大量数据到一张表中 解决方案: 1、修改表的日志记录属性为nologging,会使直接路径生成的redo最小(对dml基本没有影响) 2、使用直接路径加载  insert /*+ append */ into xxx select ......
  • ETL 数据加载机制概述

    千次阅读 2018-10-29 15:00:08
    ETL 是数据抽取(Extract)、转换(Transform)、加载(Load)的简写,它的功能是从数据源抽取出所需的数据,经过数据清洗和转换,最终按照预先定义好的数据仓库模型,将数据加载到数据仓库中去,是构建数据仓库最...
  • 加载数据

    2019-09-27 08:53:43
    加载自己的数据集 对于torchvision.datasets中有两个不同的类,分别为DatasetFolder和ImageFolder,ImageFolder是继承自DatasetFolder。 下面我们通过源码来看一看folder文件中DatasetFolder和ImageFolder分别做了...
  • Load("数据加载中...");dispalyLoad();
  • jQuery实现当拉动滚动条到底部加载数据 *{margin:0;pa动态加载数据ing:0;} body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;} a{color:#444;text-decoration: none;} a:hover{...
  • Element-UI的表格动态加载数据

    万次阅读 2017-08-17 10:54:22
    Element-UI的表格动态加载数据
  • comboBox 加载数据的几种方式

    万次阅读 2012-03-07 11:07:40
    1,加载远程json数据,要设置的参数 url:返回json数据的url地址 valueField: 指定json中那一项为值 字段 textField: 指定json中那一项为要显示的文字 字段 2,加载本地json变量 或文件 加载json格式的文件,...
  • echarts 数据重新加载,原数据依然存在图表上

    万次阅读 热门讨论 2017-12-06 14:49:34
    多次调用时option选项默认是合并(merge)的,加上true表示不合并配置myChart.setOption(option,true); // 加上true表示不合并配置原图: 加上true后:
  • Easyui datagrid加载本地Json数据

    万次阅读 2012-03-09 00:52:39
    var jsonstr = '{"total":1,"rows":[{"id":"M000005","name":"检测设备","sortid":3,"valid":"1","handler":"系统管理员"}]}'; var data = $.parseJSON(jsonstr);  $('#goods_Type_Grid').datagrid('loadData', ...
  • easyui datagrid加载数据的两种方式

    万次阅读 2017-01-15 12:21:02
    1、加载本地数据var obj = {'total':2,'rows':[{id:'1',name:'一'},{id:'2',name:'二'}]}; $('#dg').datagrid('loadData',obj);注意:这里的数据必须是json对象,要是json字符串,必须先转换成json对象才能作为...
  • jqgrid刷新列表,重新加载数据

    万次阅读 2016-01-25 13:27:49
    重新加载jqGrid中的数据jQuery("#grid_id").trigger("reloadGrid");
  • echarts 重新渲染(重新绘制,重新加载数据)

    万次阅读 热门讨论 2020-03-27 16:23:52
    mychart.setOption(option,true)
  • 微信小程序动态的加载数据

    万次阅读 2017-04-11 13:34:54
    微信小程序刚出来有很多的东西还在更新,先写些刚开始要做的工作 1、首先要写在js里定义一个...2、请求数据加载,获得整个数组信息  wx.request({  url: httpUrl,  data: {},  success: function (res) {  
  • 一、datagrid动态数据加载easyui datagrid实现动态加载数据,通常有两种方式。一种方式是通过动态改变datagrid的url属性,进行数据重载;另一种方式,是通过ajax动态加载json数据。1、改变url属性重载数据。var url=...
  • Cesium中简单的LOD动态加载大量三维模型

    万次阅读 热门讨论 2017-09-29 16:40:43
    诚然官方团队已经开始了一个号称革新技术的3Dtiles的三维模型批量加载处理方案,但目前其一直还在开发中,而且也还没有看到一个数据处理项目,当然github上的相关分支中也能看到运行不错的例子了。从一个公司或者一...
  • Ext, GridPanel加载数据后进行操作

    千次阅读 2014-06-06 11:40:22
    比如load数据之后选定某些行数据:
1 2 3 4 5 ... 20
收藏数 1,641,256
精华内容 656,502
关键字:

数据加载