uni-app アプレット読み込み画像の最適化

シナリオ:大きな画像の読み込みが非常に遅く、白い画面が長く続くため、ユーザー エクスペリエンスが低下します。

 

解決策: ページに入ったら、画像が正常に読み込まれる前に、loading... を実行します。画像が読み込まれた後に @load イベントがトリガーされます。

<template>
  <view class="">
    <image @load="loadImg($event)"  src="../static/image.jpg" mode="widthFix" />
  </view>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  onShow () {
    //开启加载
    uni.showLoading({
      title: '加载中...',
      mask: true
    })
  },
  methods: {
    // 此方法会在图片加载完成后触发
    loadImg (e) {
      uni.hideLoading()
      console.log('图片信息', e)
    },
  },
}
</script>

<style>
</style>