如上图，空页面第一次加载时，使用模态加载；页面返回数据后，再次加载则使用了非模态，细分场景，体验很舒服。
注意，如果模态加载时间较长，需要给出加载进度，长时间加载，用户可能以为界面死了，不知道进度也会失去耐心
非模态加载，比较温和，你继续做你的事，同时我加载你要的东西，准备好了就给你。在某个角落，不干扰你做事，又不离开你视线，贴心小棉袄。让用户在等待的时候有事可做，不用干等，缓解用户等待的焦虑。
如上文提到的，当前页面有数据，用户有事可做，且用户行为不会影响到原来的加载请求，这时候适合使用非模态加载。常见的有上拉加载、下拉加载。加载的提示信息可以放在页内，状态栏 、操作栏等，位置比较灵活
非模态的加载方式，一定成都减轻了在当前页面有内容时，用户的等待焦虑；在空页面加载时效果不理想。还能再优化一些？程序员那里还有更高阶的方法。为了减少用户感知的等待时间，系统可以尽早的向用户展示信息。
还是用点餐的例子，去餐厅点餐，你点的是套餐，这就很舒服了，服务员、厨师都套餐的流程，菜品都非常熟悉。菜还没开始做，就可以先把红酒、蜡烛、刀叉给你摆好了。页面也是，当用户请求的页面布局，我们已知时，可以先在页面加载占位图，等到数据回来后再陆续的填进去，给用户加载很快的感觉。
如下图，饿了么h5，先加载页面布局，这时候数据还没有返回，界面已经开始响应。
Skeleton Screen 适合内容排班比较固定或排版布局已知的页面，先加载大致轮廓，再加载细节。使用竞品时发现，有些产品发布了新版本，占位图却没做更新，导致加载前后有闪屏的感觉。所以，布局未知，布局多变的页面，不要使用。
当用户请求的页面包含大量内容，如文本、图片、音视频等，全部渲染完成需要较长时间。懒加载就像餐厅服务员一样，把菜一个一个的送给用户，懒加载解决的是客户端渲染展示给用户这一环节。
从图上看，懒加载进步一压缩了用户的等待时间，用户不必等到页面全部加载完成就可以开始阅读（一些工具类页面，懒加载过程不允许操作或操作无响应），减少用户的等待焦虑。对客户端而言，原来3s要加载完的内容可以拖到5s分批给，减轻了压力。如果用户不喜欢中途离开了，剩下的内容可以不用渲染，少干了不少活。
如下图示例，今日头条先加载文字，后加载图片；高德地图可视区域外的区域等到用户滑动屏幕时才加载，节省流量。
综上，懒加载更像是打着缓解用户等待焦虑的旗号，客户端偷懒的方法。
懒加载将原来5秒全部加载完成优化到了2秒就可以提供部分内容，但用户说别人家瞬间就加载完了，你还要拖拖拉拉，5s才能加载完！这又是什么黑科技。
再看这张图，预加载是更贴心的小棉袄，会揣摩用户的心思，偷偷提前做准备。用户在看A页面时，客户端就在准备用户可能会看的B页面，用户需要时，立刻给他，然后去准备C页面，给用户提供无缝链接的感觉，代价就是服务端、客户端都累的够呛，耗费用户更多的流量。预加载一直走在用户前面，勤快、周到。懒加载一致等待用户发号施令，是真的懒。
如下图，刷新今日头条列表，详情页就已经开始准备了。此刻切换飞行模式，点开文章详情，能看到文字已经显示在那里了，为什么没有图片？机智的程序员为了给用户省流量，确认用户点开后才开始请求图片。
综上，为了能让页面加载流畅，达到最好的使用体验，需要结合产品和场景组合使用加载方式，文中举例的产品都不止使用了一种加载手段。具体实现方案还需要结合自己的产品和场景来确定。
U633687664
U582679646
