一、常规的页面处理的时候,我们可以使用多种方式处理图片预加载,但是这些方法在小程序中似乎就没有
那么好用了,所以,我们可以使用图片的回调函数进行图片的预加载处理;
二、微信小程序的第一种情况是: 现在有A ,B 两个页面
在B 页面中有 10 张图片,需要提前预加载处理,
那么我们可以在A页面加载完的时候提前加载B中的 10 张图片,
或者在进入 B页面中的时候,在 onload 函数中通过图片的回调函数监控图片加载的状态,
加载完之前显示一个loading,加载完之后再显示页面;
三、上面的两种情况是,一个页面有loading等待处理,一个没有loading等待处理,需要根据情况处理;
四、下面通过一张图片的预加载说明小程序中预加载的相关处理:
情景描述: 先显示一张loading页面,在这段时间内加载图片,加载完成后显示正常的页面;
<view> 我是一个完整的页面
<view> 我是预加载图片显示的loading部分,加载完成后就不显示了
<view>我是loading部分</view> loading部分
<view><image src="test.jpg" onload = "imgLoad"></image></view> 预加载的图片(需要隐藏)
</view>
<view>我是需要图片预加载之后再显示的部分</view> 我是预加载之后显示的页面,上面的图片加载完成之后再显示
</view>
上面的是基本的页面结构处理;
那么如何控制loading和图片预加载之后的页面显示呢?
给图片设置 onload 事件 ,我们定义的这个 imgLoad 函数在图片加载完成之后才会执行,
所以,我们在这个函数里面进行处理即可;
首先显示loading页面,不显示后面要显示的页面,
然后加载图片,在图片的onload 事件中增加处理,隐藏 loading ,显示后面的页面内容,
一旦这图片预加载完成,就会触发这个函数的处理,达到我们需要的效果;
上面只是单张图片的预加载处理,有的时候我们需要加载一个帧动画,那图片太多了,
所以处理的原理都是这样,处理的方式可能略有不同,后续补充。。。