要實現圖片懶加載，你可以使用uniapp提供的IntersectionObserver組件。以下是實現圖片懶加載的步驟：
// 在頁面的onLoad鉤子函數中創建IntersectionObserver對象
onLoad() {
this.observer = uni.createIntersectionObserver(this)
}
<template>
<img :src="placeholder" :data-src="imageUrl" @load="onImgLoad" class="lazy-img">
</template>
// 在頁面的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()
}
})
}
methods: {
onImgLoad(event) {
const { dataset } = event.target
event.target.src = dataset.src
}
}
這樣，當圖片進入可視區域時，圖片的src屬性會被替換為真實的圖片鏈接，實現圖片的懶加載。
