uniapp怎么实现图片懒加载
要实现图片懒加载,你可以使用uniapp提供的IntersectionObserver组件。以下是实现图片懒加载的步骤:
- 在uniapp中创建一个IntersectionObserver对象,用于观察图片是否进入可视区域。
// 在页面的onLoad钩子函数中创建IntersectionObserver对象
onLoad() {
this.observer = uni.createIntersectionObserver(this)
}
- 在页面中的图片标签上绑定IntersectionObserver对象,并设置图片的初始src为占位图。
<template>
<img :src="placeholder" :data-src="imageUrl" @load="onImgLoad" class="lazy-img">
</template>
- 监听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()
}
})
}
- 在图片加载完成时,将图片的src赋值为真实的图片链接。
methods: {
onImgLoad(event) {
const { dataset } = event.target
event.target.src = dataset.src
}
}
这样,当图片进入可视区域时,图片的src属性会被替换为真实的图片链接,实现图片的懒加载。