1. 程式人生 > >微信小程式的圖片預載入處理

微信小程式的圖片預載入處理

一、常規的頁面處理的時候,我們可以使用多種方式處理圖片預載入,但是這些方法在小程式中似乎就沒有

       那麼好用了,所以,我們可以使用圖片的回撥函式進行圖片的預載入處理;

二、微信小程式的第一種情況是: 現在有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 ,顯示後面的頁面內容,

一旦這圖片預載入完成,就會觸發這個函式的處理,達到我們需要的效果;

上面只是單張圖片的預載入處理,有的時候我們需要載入一個幀動畫,那圖片太多了,

所以處理的原理都是這樣,處理的方式可能略有不同,後續補充。。。