本文作者向大家详细介绍了数据加载的相关知识。 一起看看文章吧~

在项目进行中，出现了数据加载的常见问题。 前端向服务器发送资源请求，服务器端在返回数据的过程中，由于网络和返回路径的错误等问题，资源可能无法顺利在前端显示，从而发生加载延迟和加载失败。

在这种情况下，为了保持良好的用户体验，负载必须占据位图，并向前端呈现加载失败的状态。 在解决这些问题的过程中，对数据加载有了更多的认识和梳理。

一、加载的业务场景/触发事件

(1)从后台切回到前端(一定时间内) )。

如果被剪切到后台，并根据业务需要在短时间内返回到前台，则不会加载新数据，而是会继续显示原始页面和提示符框。 如果时间间隔超过一定值，则需要添加事件以更新当前页面并加载新数据。

2 )启动APP

如果发生异常关闭、APP闪回、进程被杀害等情况，请单击“需要重新启动APP”，然后浏览启动页或直接加载首页。

(3)读取页内事件触发器)手动读取用户，自动读取系统

用户手动加载、通过下拉或单击操作刷新页面和加载新数据的系统通常在显示当前内容后立即加载和更新新内容。

4 )定时数据的更新

有些排名和限时事件需要在特定的时间更新页面和加载数据。

)5)实时消息推送

IM邮件采用实时推送机制，无需用户手动加载或更新。

二、如何加载/加载逻辑

(1)懒惰的加载和预加载

懒惰加载(通常默认使用懒惰加载) :进入页面加载数据预加载(Wi-Fi时考虑使用) :预加载数据，然后查看页面。 )2)整体加载

通过加载页面的所有内容，然后展示给用户，可以确保内容的完整性，并将其应用于需要内容完整性的页面，如购物车。 如果加载时间过长，则需要给用户提供一定的反馈和提示。

)3)块加载

可以优先加载信息类的文章，然后加载图像等，也可以根据资源的种类等前后加载。 保证用户可以最快获取内容，但部门的内容加载缓慢，可能会被用户忽略。

(4)分页负载

对于某些列表或卡信息，可以使用自动或手动分页加载。 虽然可以展示这样比较丰富的内容，但是信息的检索也需要一定的时间。

)5)分割画面加载

首先加载页面框架，滚动页面，然后加载相应的内容。 适合数据量大的页面。

)6)智能道路

根据用户的网络状况选择不同的负载计划。 在非Wi-Fi中，不加载图像和字符，而是在用户单击确认之后加载资源； 对于Wi-Fi，加载所有资源。

(7) Wi-Fi预加载读缓存

对于Wi-Fi，预先加载数据，如果没有要在本地缓存的网络，则直接加载本地缓存。 解决了在没有网络的情况下检索数据的问题，节省了流量，但占用了本地存储空间。

三、加载优化

(1)在Wi-Fi条件下，考虑预载

)2)异步处理

例如，在支付宝(Alipay )弱的网络的情况下的计费处理(客户端通知用户计费成功，记录用户的计费行为，等待网络环境变好后向服务器报告，进行计费操作)。

(3)缓存的使用

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

四、加载的业务流程设计

(1)主流程

触发事件—— (加载逻辑) ——页更新规则)表示要加载的数据量、规则) ——更新新内容——用户提示拷贝。

)2)分支过程

如果没有更多新内容，将删除空页面、页面，页面将受到限制。

)3)异常的流程

网络连接失败、更新操作频繁、网络状态切换、弱网络、服务器崩溃。

五、加载的功能流程设计

(1)功能

下拉式重新整理、按一下重新整理、系统自动重新整理、重新载入按钮。

)2)加载状态的展示

网络不正常的原因是，加载是否占了位图，加载进度条(先慢后快，有没有加载视频、加载成功和失败的提示。

六、加载占位图

(1)原理

通过css控制，可以在加载网络图像时，在未加载完成时显示本地占用位图，在加载完成时显示网络图像。

)2)设计原则

a .载入品牌要素或其他要素(提示可提示的内容) ) ) ) ) ) ) ) ) ) ) ) )。

优点：给用户带来期待，提高品牌感觉的缺点：需要匹配

b .加载颜色块：通过读取图像的颜色或默认颜色来占位符

优点：合身方便，需要提供彩色银行，画面不无聊； 缺点：需要调节颜色

c .加载布局：虽然很简单，但视觉效果可能不太好

d .加载默认的灰色图表

e .使用高斯模糊：效果很好，但是有一定的功耗，加载慢

七、启动页/闪屏

(1)使用场景

单击APP上的启动图标，距离APP首页出现还有一段时间。 时间长短取决于设备的性能和网络环境，从数百毫秒到数秒不等。 在这个空白的时间里

不让用户感到困惑或因为等待而产生焦虑。

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

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

（2）设计原则

快速启动类：和首屏页面类似，最大程度减少割裂感品牌类：提现品牌logo、名称、slogan等元素情感共鸣：弱化品牌元素，增进情感设计广告类：启动页展示广告位，流量变现。一般是先显示品牌页，再显示广告页，用户可以选择跳过节日类：为特定节日量身制作启动页，给用户新鲜感、亲切感其他：例如成为H5页面、其他APP入口等

（3）业务流程

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

本文由 @lemon 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议