uniapp开发h5页面实现图片预加载功能

背景

h5页面，很多时候存在大量的图片、动画，这些都需要下载大量的静态资源，如果我们直接打开页面，会发现部分图片正在加载或者还未下载的现象，严重影响体验效果。
为了解决这个问题，我们需要进行图片预加载的操作。

什么是图片预加载？

简单来说，图片预加载就是在页面渲染前把所有的图片、GIF等静态资源全部下载完毕，使得页面渲染后直接打开缓存的图片资源，从而减少卡顿的问题，优化用户体验。
那么如何在h5中实现图片预加载呢？

具体实现

解析

1. 利用image的src属性，下载图片，下载完成触发onload事件
2. 用count统计已下载的图片数量，在加载页面显示加载进度percent
3. 用loaded属性，加载完毕切换页面

结语

图片做完预加载后，如果依然出现显示卡顿、滚动显示的现象，我们就要从以下几方面继续做优化：

1. 图片压缩，尽可能压缩图片的体积，能有效提高显示的效果
2. 网速、带宽优化