微信小程序的图片预加载处理

一、常规的页面处理的时候，我们可以使用多种方式处理图片预加载，但是这些方法在小程序中似乎就没有

       那么好用了，所以，我们可以使用图片的回调函数进行图片的预加载处理；

二、微信小程序的第一种情况是： 现在有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 ,显示后面的页面内容，

一旦这图片预加载完成，就会触发这个函数的处理，达到我们需要的效果；

 

上面只是单张图片的预加载处理，有的时候我们需要加载一个帧动画，那图片太多了，

所以处理的原理都是这样，处理的方式可能略有不同，后续补充。。。