vue3 封装组件 ——懒加载

图片的懒加载功能是通过IntersectionObserver来实现的。

以下是封装的组件

<template>
  <div>
    <img :src="placeholderImage" alt="" :data-src="src" ref="lazyimg" />
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'

export default {
  props: {
    src: {
      type: String,
      required: true
    }
  },
  setup() {
    const placeholderImage = ref('')
    const lazyimg = ref(null)

    const Lazy = () => {
      // 创建 IntersectionObserver 实例
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            // isIntersecting是 是否进入可视区 true
            // 判断进入可视区时,将被观察的targe 的值img
            // 当在HTML中使用data-前缀定义自定义数据属性时,
            // 可以通过dataset属性访问这些属性的值。
            // 当进入可视区时 将自定义的数据 dataset 赋给src
            const img = entry.target
            img.src = img.dataset.src // 将 data-src 的值赋给 src，实现图片加载
            observer.unobserve(img) // 停止对元素的观察
          }
        })
      })

      observer.observe(lazyimg.value) // 开始观察 lazyimg 元素
    }

    onMounted(() => {
      Lazy()
      // console.log(lazyimg.value)
    })

    return {
      placeholderImage,
      lazyimg,
      Lazy
    }
  }
}
</script>

使用懒加载组件的话

<LazyImg :src="item.avatar_url" alt=""></LazyImg>