Uniappで画像の遅延読み込みを実装する方法は何ですか。

画像の遅延読み込みを実現するには、uniappが提供するIntersectionObserverコンポーネントを使用することができます。以下は画像の遅延読み込みを実現する手順です。

1. uniapp内でIntersectionObserverオブジェクトを作成し、画像が表示領域に入ったかどうかを観察します。

// 在页面的onLoad钩子函数中创建IntersectionObserver对象
onLoad() {
  this.observer = uni.createIntersectionObserver(this)
}

1. ページ内の画像タグにIntersectionObserverオブジェクトをバインドし、画像の初期srcをプレースホルダ画像に設定します。

<template>
  <img :src="placeholder" :data-src="imageUrl" @load="onImgLoad" class="lazy-img">
</template>

1. IntersectionObserverオブジェクトのコールバック関数を監視し、画像が可視領域に入ったときにdata-src属性の値をsrc属性に割り当てて、画像の遅延読み込みを実現します。

// 在页面的onReady钩子函数中开始观察图片
onReady() {
  this.observer
    .relativeToViewport()
    .observe('.lazy-img', (res) => {
      if (res.intersectionRatio > 0) {
        const { dataset } = res.target
        res.target.src = dataset.src
        this.observer.disconnect()
      }
    })
}

1. 画像の読み込みが完了したとき、画像のsrcを実際の画像リンクにセットします。

methods: {
  onImgLoad(event) {
    const { dataset } = event.target
    event.target.src = dataset.src
  }
}

画像が表示領域に入ると、画像のsrc属性が実際の画像リンクに置き換えられ、画像の遅延読み込みが実現されます。