[交互基础］系列之移动端页面加载详解(4)

3.3.分屏加载

分屏加载又称延迟加载或懒加载。

• 定义：先加载框架和文字，再加载第一屏的数据，向下滚动到哪里加载到哪里。

• 场景：适用于多屏且图片资源较多的页面，如电商应用商品展示页面。

• 作用：仅加载当前视窗内的图片，页面加载速度快，可以减轻服务器的压力，节约流量，用户体验好。

• 缺点：也许会丢失重要的关键信息，无法建立信息获取的闭环。

• 表现形式：如下图所示，淘宝的商品展示页面，只加载首屏的图片，页面上滑时，下方图片进入视窗，显示占位符，加载完成后显示商品图片。

3.4.分页加载

• 定义：展示列表数据时，例如默认展示 20 条，滚动到最后的时候，自动再加载 20 条或者手动点击加载。

• 场景：适用于长列表、商品列表、咨询列表或瀑布流。

• 作用：避免一次性加载大量数据造成的体验不佳，用户可以有选择的一直向下滚动，不需要手动点击下一页。

• 缺点：把用户带入无尽浏览的模式，没有尽头，用户容易迷失，不方便快速索引定位到某一内容。

• 表现形式：如下图所示，分页加载分为手动点击加载和自动加载两种形式。

3.5.预加载

预加载与分屏加载相反，就是提前加载的意思。

• 定义：提前加载数据，当用户需要查看时可以直接从本地缓存中渲染。

• 场景：信息需要即时刷新，适用于预加载后消耗的流量较少的场景，如信息、消息等。（预加载占网络资源较小的元素如文字，是一种平衡网络流量和流畅体验的方法。）

• 作用：用户进入下一级界面无需加载过程，给用户流畅的体验。

• 缺点：为了换取更好的用户体验，增加服务器前端压力，牺牲了服务器前端性能。假设在非wifi环境下，用户不确定查看的情况下，浪费了流量。

• 表现形式：如下图所示，iOS的信息，当用户未查看时，信息详情实际上已经预加载出来了；微信的公众号消息，预加载消息的文字部分及框架，图片部分需联网获取加载。这是考虑到图片本身较大，如果预加载下来，损耗较多流量的同时占本地缓存太大，预加载文字及框架等占网络资源较小的元素，节约流量，也保证了用户在无网/弱网情况下查看消息的体验。

4.下拉加载

下拉加载的运用十分广泛，一个优秀的刷新动画可以使加载过程传递出情感化、人性化和品牌化。

• 定义：页面下拉，出现加载动画，释放后对页面进行重新加载。

• 场景：适用于界面信息会经常更新或变更的情况。（这个场景应该任何应用都有吧。）

• 作用：已成为用户习惯的加载方式，方便用户刷新当前页面，获取新数据。

• 缺点：非首屏，无法进行该手势操作。

• （编辑：ASP站长网）