uniapp怎么實現圖片懶加載

要實現圖片懶加載，你可以使用uniapp提供的IntersectionObserver組件。以下是實現圖片懶加載的步驟：

1. 在uniapp中創建一個IntersectionObserver對象，用于觀察圖片是否進入可視區域。

// 在頁面的onLoad鉤子函數中創建IntersectionObserver對象
onLoad() {
  this.observer = uni.createIntersectionObserver(this)
}

2. 在頁面中的圖片標簽上綁定IntersectionObserver對象，并設置圖片的初始src為占位圖。

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

3. 監聽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()
      }
    })
}

4. 在圖片加載完成時，將圖片的src賦值為真實的圖片鏈接。

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

這樣，當圖片進入可視區域時，圖片的src屬性會被替換為真實的圖片鏈接，實現圖片的懶加載。