3.1.整体加载
- 定义： 一次性加载完所有的内容后，再展示给用户。
- 场景： 实用于页面的内容较为单一的情况，同时在H5页面中大年夜多采取这种加载方法。
- 感化： 包管了内容的┞符体性，能体系性的浏览所有内容。
- 缺点： 等待感显得比较强烈，跨越3S轻易应用户产生焦炙的情感。是以，在地铁等旌旗灯号不好的处所应用手机网页获取内容的体验是比较差的。
- 表示情势： 如下图所示，APP的加载过程平日应用能强化品牌效不雅的趣味动画，或者简单的轮回加载、菊花加载样式，但趣味性动画的设计更能吸引用户，减轻用户等待时的焦炙感。H5页面平日应用进度条来表示加载的进度。
分步加载即先加载文字，再加载图片。页面经由过程整体加载的方法将文字加载成功后，再应用分步加载的方法来竽暌箍现页面的内容，即竽暌箍现文字内容和图片占位符，再加载图片。如许做是为了减短整体加载的时光，让内容尽快出现，削减用户的等待时光。由此，我们可以看出，我们经常要对多种加载策略进行搭配应用，以达到更好的用户体验。
- 定义： 根据页面上的资本类型进行先后加载，优先加载占收集资本较小的文字，图片在加载过程中应用占位符，直到图片加载成功。文字→图片→视频→其他资本。
- 场景： 实用于图文内容交错的页面,如消息列表页面、详情页面等。很多应用的首页都有大年夜量的图文内容，就合实用这种加载方法。
- 感化： 可以让用户快速地懂得界面信息构造及浏览内容。
- 缺点： 开端的刹时可能会损掉掉落重要的关键信息，用户初次感知可能会认为产品出现问题了。
- 表示情势： 如下图所示的图文列表、内容详情页面，先加载文字，图片加载过程中应用占位符填充地位，占位符一般应用灰框显示，或在灰框内参加品牌标识，强化品牌效不雅。
3.3.分屏加载
分屏加载又称延迟加载或懒加载。
- 定义： 先加载框架和文字，再加载第一屏的数据，向下滚动到哪里加载到哪里。
- 场景： 实用于多屏且图片资本较多的页面，如电商应用商品展示页面。
- 感化： 仅加载当前视窗内的图片，页面加载速度快，可以减轻办事器的压力，节约流量，用户体验好。
- 缺点： 也许会损掉重要的关键信息，无法建立信息获取的闭环。
- 表示情势： 如下图所示，淘宝的商品展示页面，只加载首屏的图片，页面上滑时，下方图片进入视窗，显示占位符，加载完成后显示商品图片。
3.4.分页加载
- 定义： 展示列表数据时，例如默认展示20条，滚动到最后的时刻，主动再加载20条或者手动点击加载。
- 场景： 实用于长列表、商品列表、咨询列表或瀑布流。
- 感化： 避免一次性加载大年夜量数据造成的体验不佳，用户可以有选择的一向向下滚动，不须要手动点击下一页。
- 缺点： 把用户带入无尽浏览的模式，没有尽头，用户轻易迷掉，不便利快速索引定位到某一内容。
- 表示情势： 如下图所示，分页加载分为手动点击加载和主动加载两种情势。
3.5.预加载
预加载与分屏加载相反，就是提前加载的意思。
- 定义： 提前加载数据，当用户须要查看时可以直接大年夜本地缓存中衬着。
- 场景： 信息须要即时刷新，实用于预加载后消费的流量较少的场景，如信息、消息等。（预加载占收集资本较小的元素如文字，是一种均衡收集流量和流畅体验的办法。）
- 感化： 用户进入下一级界面无需加载过程，给用户流畅的体验。
- 缺点： 为了换取更好的用户体验，增长办事器前端压力，就义了办事器前端机能。假设在非wifi情况下，用户不肯定查看的情况下，浪费了流量。
- 表示情势： 如下图所示，iOS的信息，当用户未查看时，信息详情实际上已经预加载出来了；微信的"大众,"号消息，预加载消息的文字部分及框架，图片部分需联网获取加载。这是推敲到图片本身较大年夜，如不雅预加载下来，损耗较多流量的同时占本地缓存太大年夜，预加载文字及框架等占收集资本较小的元素，节约流量，也包管了用户在无网/弱网情况下查看消息的体验。
4.下拉加载
打开APP有一个加载的过程，在这个过程中，可能对同步加载和异步加载均有涉及。
- 同步加载时的常用策略： 加载完某些数据才能进入应用，合适对某些关键数据进行检查，例如检查取户的身份信息，此种策略是为了包管一些关键数据的可控性。
推荐阅读
数据库写操作弃用“SELECT … FOR UPDATE”解决方案
膳绫擎的解决办法只是一些workaround，今朝情况下最最终的解决办法是应用lock-free的办法来对数据库进行操作，也就是无锁的方法，这就 须要对代码进行修改，如今Nova，Neutron，Gnocchi等项目已经对其进行了修改。>>>详细阅读
本文标题：[交互基础］系列之移动端页面加载详解
地址：http://www.17bianji.com/lsqh/37270.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示