uniapp怎么实现图片懒加载

uniapp

小亿

295

2024-01-05 00:31:36

栏目: 编程语言

要实现图片懒加载，你可以使用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属性会被替换为真实的图片链接，实现图片的懒加载。

uniapp怎么实现图片懒加载

最新问答

相关标签