您好、欢迎来到现金彩票网!
当前位置:多彩彩票 > 非请求分页 >

一文了解页面数据加载

发布时间:2019-04-25 00:27 来源:未知 编辑:admin

  在项目进程中,遇到了一个数据加载常见的问题:前端向服务器发送资源请求,服务端在返回数据的过程中,可能会因为网络或者返回路径出错等问题,导致资源没有办法顺畅的在前端进行展示,可能会出现加载延迟或者加载失败。

  这时为了保持较好的用户体验,需要给到前端一个加载占位图和加载失败的状态提示。在解决这些问题的过程中,对于数据加载有了更多的认识,并整理了出来。

  若切到后台并在很短时间内切回前台(视业务需要而定),则不加载新数据,继续显示原页面和提示框;若时间间隔超过一定值,则需要追加事件刷新当前页面并加载新数据。

  当异常关闭、应用闪退、进程被杀等情况出现时,点击需要重新启动APP,展示启动页或者直接加载首页。

  用户手动加载,一般通过下拉或者点击操作刷新页面,加载新数据;系统自动加载的方式一般为,当前内容已经展示完毕后随即加载并刷新出新的内容。

  加载完页面所有内容后,再展示给用户,可以保证内容的完整性,应用于一些对内容完整性有要求的页面,如购物车。若加载时间过长,需要给予用户一定反馈和提示。

  可以根据资源类型等进行先后加载,比如资讯类文章优先加载文字,其后加载图片。可以保证用户最快获取内容,但是部门内容由于加载慢可能被用户忽略。

  对于一些列表或者卡片信息,可以使用自动或者手动的分页加载。这样可以展示比较丰富的内容,但是也对信息的检索带来一定麻烦。

  先加载页面框架,页面滚动到哪里再加载相应内容。适用于一些数据量比较大的页面。

  根据用户的网络状况选择不同的加载方案。非Wi-Fi下,暂不加载图片和文字,用户点击确认后,才加载资源;Wi-Fi情况下,加载所有资源。

  Wi-Fi情况下预先加载数据,缓存到本地;在没有网络时,直接读取本地缓存。可以解决无网络时获取数据的问题,节省流量,但是会占用本地存储空间。

  例如:支付宝弱网情况下的扣费处理(客户端告知用户扣费成功并将用户扣费行为记录下来,等待网络环境变好之后再上报服务器并进行扣费操作)。

  需要注意存储的数据类型、更新规则、是否要清除缓存、清除规则、用户是否可以手动清除。

  触发事件——(加载逻辑)——页面刷新规则(加载多少数据、展示规则)——刷新出新内容——用户提示文案。

  网络情况不佳是否有加载占位图、加载进度条(先慢后快)、加载动画、加载成功与失败提示。

  通过css控制,可以实现加载网络图片时,未加载完成的时候显示本地一张占位图,加载完成后显示网络图片。

  在点击启动APP图标,到APP首页的出现,是存在一个时间,这个时间的长短取决于设备的性能和网络环境,从几百毫秒到几秒不等。在这段空白时间,为了不让用户感到困惑或因为等待而产生焦虑。

  iOS的设计规范规定,要在启动APP时,设计一个启动页,来填补这段用户等待的时间。由于APP启动的过程很短,从几百毫秒到几秒不等,所以启动页也被称为闪屏。

  但是,现在的启动页不仅仅应用于这一场景。许多启动页还担负了广告展示、H5活动展示、APP跳转等功能。

  启动APP——检测本地闪屏资源——-显示闪屏(同时进行登录状态、用户权限、闪屏业务检测)——点击跳转到落地页/直接进入首页。

  是不是4G了,流量不限量了,只有在个别信号差的场景下,才要按照这些数据加载分类?产品先判断网速?很是疑惑。

  可以找个app抓包看一下比较能理解,文字/视频/图片通常来自不同的服务器或者不同的响应。1. 请求数据 2.获取 文字 2.获取图片。文字可能只是一个json文件很小,图片看情况,有的只是个缩略图(比如头像)也就几K,有的清晰大图就很大,会在感觉上他们不是一起出现的,其实他们通常是一起接收的(忽略响应时间略有细微不同),只是图片比较大,网速不好的时候就会慢一些,需要一个占位图。

  加载总是需要时间的,不同的媒体类型加载快慢不同,网络环境不同加载快慢也不同,要考虑到这些情况。加载占位图是写在本地的,在服务端资源返回之前优先展示出来,据我所知是不需要判断网速的,就是逻辑上的先后问题。

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

http://kamexpress.net/feiqingqiufenye/51.html
锟斤拷锟斤拷锟斤拷QQ微锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷微锟斤拷
关于我们|联系我们|版权声明|网站地图|
Copyright © 2002-2019 现金彩票 版权所有