Vue3+Ts封装图片懒加载函数

　　定义懒加载Hook↓，IntersectionObserver 是浏览器原生提供的构造函数，接受两个参数：callback 是可见性变化时的回调函数，option 是配置对象。

interface IOptions {
  threshold: number[]
  root: HTMLElement
  rootMargin: string
}

const useLazyImg = (
  root: HTMLElement,
  img: HTMLImageElement,
  options: IOptions = {
    threshold: [0.5],
    root: root,
    rootMargin: '120px',
  },
) => {
  // start
  function callbackFn(entries: any) {
    if (entries[0].isIntersecting) {
      img.src = img?.getAttribute('data-url') as string
      io.unobserve(img as HTMLElement)
    }
  }
  const io = new IntersectionObserver(callbackFn, options)
  io.observe(img as HTMLElement)
  // 卸载
  function uninstall() {
    io.disconnect()
  }

  return { uninstall }
}

export default useLazyImg

　　定义函数式ref获取到每个img元素↓(ref随便命名的)

<template>
  <div class="category-list">
    <div :ref="divRef">category-list1</div>
    <div :ref="divRef">category-list2</div>
    <div :ref="divRef">category-list3</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const divRef = (e: any) => {
  console.log(e)
}
</script>

 

 

　　循环生成数据时，给img标签加上:data-url属性并赋值所需图片url↓ <img :data-url="contentsData?.data?.image?.url" alt="" ：ref="divRef" /> 

　　到此即可开始监听图片是否到可视区并控制显示（observe方法的参数是一个 dom 节点，如果需要观察多个对象，则需要多次调用）