vue自定义指令实现懒加载的优化指南

<!-- 图片懒加载 -->
<img v-lazy="()=>import("@/assets/images/...")" />

<!-- 组件懒加载 可以配合异步组件实现 -->
<div v-lazy="()=>show.value=true">
  <ProductList v-if="show"/>
</div>

<!-- 延迟请求接口数据 -->
<div v-lazy="getListData">
  <ul>
    <li v-for="item in List">{{item}}</li>
  </ul>
</div>

// 存储函数的WeakMap
const weakMap = new WeakMap()

// 自定义指令
export default {
  mounted(el, binding, vnode) {
    // 拿到函数
    const fun = binding.value
    // 存储函数
    weakMap.set(el, fun)
  },
}

const io=new IntersectionObserver((entries)=>{
  entries.forEach((entrie) => {
    // 操作
  })
})

// 监听目标元素
io.observe(document.getElementById('container'))
// 停止监听
io.unobserve(document.getElementById('container'))

const weakMap = new WeakMap()

// ---------- 第二歩 ------------------------

// 元素进入可视区 要执行的callback
function lazyEnter(entries) {
  entries.forEach((entrie) => {
    if (entrie.intersectionRatio > 0) {
      
    }
  })
}
const lazy = new IntersectionObserver(lazyEnter)

// ------------------------------------------

export default {
  mounted(el, binding, vnode) {
    const fun = binding.value
    weakMap.set(el, fun)

// ---------- 第二歩 -------------------------
    lazy.observe(el)
// ------------------------------------------
  },
}

const weakMap = new WeakMap()

function lazyEnter(entries) {
  entries.forEach(async (entrie) => {
    if (entrie.intersectionRatio > 0) {
// ---------- 第三歩 ------------
      // 取出函数
      const el=entrie.target
      const fun = weakMap.get(el)

      // 图片懒加载要设置src属性 需要特殊处理
      const isImg = el.tagName === "IMG"

      if(isImg){
        el.src=(await fun()).default
      }else{
        // 执行函数
        fun()
      }

      // 停止监听
      lazy.unobserve(el)
// ------------------------
    }
  })
}

const lazy = new IntersectionObserver(lazyEnter)


export default {
  mounted(el, binding, vnode) {
    const fun = binding.value
    weakMap.set(el, fun)
    lazy.observe(el)
  },
}

<img v-lazy="()=>import("@/assets/images/...")" />

// 处理图片加载成功的函数
async function lazyImg(el) {
  const img = await import("@/assets/images/...")
  el.src = img
}

<img v-lazy="lazyImg" />

function lazyEnter(entries) {
  entries.forEach(async (entrie) => {
    if (entrie.intersectionRatio > 0) {
// ---------- 第三歩 ------------
      // 取出函数
      const el = entrie.target
      const fun = weakMap.get(el)

      // 执行函数
      fun(el)

      // 停止监听
      lazy.unobserve(el)
// -----------------------------
    }
  })
}

img{
  width:100%;
  height:auto;
}

<template>
  <div class="img" :style="{ 'padding-top': paddingTop }">
    <div class="container">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
// 引入四舍五入函数,默认取小数点后两位
import { roundToDecimal } from "../../utils/tools"

const props = defineProps({
  width: Number,
  height: Number,
})
const { width, height } = props

const paddingTop = roundToDecimal(height / width) * 100 + "%"

</script>

<style lang="less" scoped>
.img {
  width: 100%;
  position:relative;
  .container{
    position: absolute;
    inset: 0;
  }
}
</style>

<IpImage :width="500" :height="400">
  <img v-lazy="()=>import('@/assets/images/...')" alt="">
</IpImage>

<img
  v-lazy
  sizes="(max-width:768px) 764px,382px"
  src="@/assets/images/home/banner.png"
  srcset="@/assets/images/home/banner.png 382w, 
    @/assets/images/home/banner@2x.png 764w, 
    @/assets/images/home/banner@3x.png 1128w"
/>

const weakMap = new WeakMap()

function lazyEnter(entries) {
  entries.forEach(async (entrie) => {
    if (entrie.intersectionRatio > 0) {
      // ----------------这里有修改-------------------
      const fun = weakMap.get(entrie.target)

      await fun()

      lazy.unobserve(el)
      // ----------------------------------------------
    }
  })
}

const lazy = new IntersectionObserver(lazyEnter)

export default {
  // ----------------这里有新添加的代码-------------------
  beforeMount(el, binding, vnode) {
    if (!binding.value && vnode.type === "img") {
      const { sizes = "", src = "", srcset = "" } = vnode.props

      // 拦截属性
      el.removeAttribute("sizes")
      el.removeAttribute("src")
      el.removeAttribute("srcset")

      // 在目标元素可见时 执行这个函数 把属性添加到元素上
      const fun = () => {
        sizes && el.setAttribute("sizes", sizes)
        src && el.setAttribute("src", src)
        srcset && el.setAttribute("srcset", srcset)
      }
      binding.value = fun
    }
  },
  // ----------------------------------------------
  mounted(el, binding, vnode) {
    const fun = binding.value
    weakMap.set(el, fun)
    lazy.observe(el)
  },
}

<img
  loading='lazy'
  sizes="(max-width:768px) 764px,382px"
  src="@/assets/images/home/banner.png"
  srcset="@/assets/images/home/banner.png 382w, 
    @/assets/images/home/banner@2x.png 764w, 
    @/assets/images/home/banner@3x.png 1128w"
/>

// 引入防抖 和 节流 方法
import { debounce, throttle } from "@/utils/tools"

class MyIntersectionObserver {
  constructor(callback) {
    this.callback = callback
    this.targets = new Map()

    this.debounceCheckIntersections = debounce(this.checkIntersections.bind(this), 50)
    this.throttleCheckIntersections = throttle(this.checkIntersections.bind(this), 100)

    // 监听滚动和调整大小事件
    window.addEventListener("scroll", this.throttleCheckIntersections, true)
    window.addEventListener("resize", this.throttleCheckIntersections, true)
  }

  // 获取根元素的边界矩形
  getRootRect() {
    return {
      top: 0,
      left: 0,
      bottom: window.innerHeight,
      right: window.innerWidth,
      width: window.innerWidth,
      height: window.innerHeight,
    }
  }

  // 检查目标元素与根元素的相交情况
  checkIntersections() {
    const rootRect = this.getRootRect()

    const entries = []

    for (const [target, _] of this.targets) {
      const targetRect = target.getBoundingClientRect()

      
      // 根元素 和 目标元素是否相交
      const isIntersecting =
        (0 < targetRect.top && targetRect.top < rootRect.bottom) || (0 < targetRect.bottom && targetRect.bottom < rootRect.bottom)

      // 交叉区域
      const intersectionRect = {
        top: isIntersecting ? Math.max(rootRect.top, targetRect.top) : 0,
        left: isIntersecting ? Math.max(rootRect.left, targetRect.left) : 0,
        bottom: isIntersecting ? Math.min(rootRect.bottom, targetRect.bottom) : 0,
        right: isIntersecting ? Math.min(rootRect.right, targetRect.right) : 0,
      }

      intersectionRect.width = Math.max(0, intersectionRect.right - intersectionRect.left)
      intersectionRect.height = Math.max(0, intersectionRect.bottom - intersectionRect.top)

      const targetArea = targetRect.width * targetRect.height
      const intersectionArea = intersectionRect.width * intersectionRect.height

      // 交叉区域 占目标元素的比例 
      // 注意: 图片还不可见时, 没有加载资源, 也就没有高度, 相交区域也为0, 但是实际上img可能已经进入可视区了, 需要特殊判断一下
      const intersectionRatio = targetArea > 0 ? intersectionArea / targetArea : isIntersecting ? 1 : 0

      entries.push({
        target,
        intersectionRect,
        intersectionRatio,
        boundingClientRect: targetRect,
        isIntersecting,
        time: Date.now(),
      })
    }

    // 有元素可见才触发callback, 实际上IntersectionObserver API不可见时也会触发一次,但是v-lazy没有用到不可见的这次触发,所以不用管
    if (entries.some((item) => item.intersectionRatio > 0)) {
      this.callback(entries)
    }
  }

  observe(target) {
    if (!this.targets.has(target)) {
      this.targets.set(target, true)

      // 因为可能有的元素一开始就在可视区 但是添加的监听只有触发scroll事件才会检查相交情况
      // 所以需要等待所有元素都添加监听完成后再统一执行一次 checkIntersections 方法,检查相交情况
      // 这里利用防抖可以实现, 因为防抖在一段时间内高频触发只会执行最后一次
      this.debounceCheckIntersections()
    }
  }

  unobserve(target) {
    this.targets.delete(target)
  }

  disconnect() {
    this.targets.clear()
    window.removeEventListener("scroll", this.throttleCheckIntersections)
    window.removeEventListener("resize", this.throttleCheckIntersections)
  }
}

export default MyIntersectionObserver