自用笔记：本文属于自用笔记，不做详解，仅供参考。在此记录自己已理解并开始遵循的前端代码规范。What How Why

做H5移动端活动页面，想必大家都会遇到图片还没有加载出来的情况。通常原因都有很多，但主要原因还是图片太多、太大。
优化思路：

1. 合并HTTP请求
2. 缓存管理
3. 图片压缩
4. 对页面部分图片做预加载处理
5. Loading首屏显示加载效果，等待加载完毕。

实现思路：

1. 进度问题
   由于页面加载过程时间不较长，而用户不能通过页面loading效果看出加载的进度怎样，所以要在页面中显示现在，页面中的进度如何。
   实现方式：
   1. 比较总文件大小与加载文件的大小（没有原生的方法？）
   2. 比较总文件数目与加载文件的数目

2. 加载失败
   如果文件中有文件因为网络原因加载失败，或者是图片没有加载出来。不因引响加载器的功能。

3. 加载超时问题
   图片不能加载太久，否则用户一直停留在加载效果上看不到主内容，用户的等待时间不可控制地延长，导致用户体验下降，这样就有悖加载器的初衷了。所以应该给每个图片设置一个加载的超时时间，如果在所有图片的超时时间之后，还没加载完，就应该主动放弃加载，通知外部上下文加载完毕，显示主内容。

利用简洁的图片预加载组件提升h5移动页面的用户体验