h5页面预加载完成再展示

Question

看到很多动画比较多的h5单页面展示页，是进入页面的时候先读条或者显示加载百分比。然后资源加载完毕后，再真正展示页面。

这种页面一般是有大量动画和图片的单页面，类似swiper那样切换场景展示，每个场景有些动画或者音频。

请问这种预加载功能是怎么实现的，什么原理？

Answer 1

1. 这种预加载界面需要解决的问题，主要是页面所需资源文件过大，从而可能导致用户在看到页面时出现显示不全、仍在加载等情况，影响体验。注意这里预加载的一般以图片居多，其次还会有音频、字体文件等，动画除非是单独用json的形式来写（白鹭引擎里有种），一般不用单独去做预加载，js、css文件都可以不用（当然做了也没错）。
2. 以最简单的图片预加载为例，一般是用js单独new一个image对象，然后循环填入图片URL，再在load回调（加载完成）里重复这个步骤，从而完成所有图片的加载。具体的可以看看凹凸实验室的preloader.js的源码，写的挺清楚的。
3. 进度条有三种方法：假进度条就不说了；第二种是根据文件个数算百分比，当然做的细致点是百分比，做的糙就是类似“12/28”这种纯字符了；第三种是真实的加载进度，这种一般是用Ajax做加载，因为有加载回调可以用，像PxLoader实现的是这种。
4. 一般预加载代码可以以同步script的方式写在head里，这样在body里的资源加载之前运行，是正常的流程；或者所有资源先不用src而是找个替代属性（如图片是<img src="xxx">要改成<img data-src="xxx">），待js加载完后再改回来。这样确保一定次序，不会两边都跑加载造成冲突。

Answer 2

界面默认进去显示loading遮罩。
window.onload后遮罩移除 。
进度条基本都是假的,
除非手动去计算加载的资源数量或者大小然后百分比换算....

Answer 3

https://github.com/xkh/preloa... 试试这个 js、css、img都可以