<!-- 圖片懶加載 -->
<img v-lazy="()=>import("@/assets/images/...")" />

<!-- 組件懶加載 可以配合異步組件實(shí)現(xiàn) -->
<div v-lazy="()=>show.value=true">
  <ProductList v-if="show"/>
</div>

<!-- 延遲請求接口數(shù)據(jù) -->
<div v-lazy="getListData">
  <ul>
    <li v-for="item in List">{{item}}</li>
  </ul>
</div>

// 存儲(chǔ)函數(shù)的WeakMap
const weakMap = new WeakMap()

// 自定義指令
export default {
  mounted(el, binding, vnode) {
    // 拿到函數(shù)
    const fun = binding.value
    // 存儲(chǔ)函數(shù)
    weakMap.set(el, fun)
  },
}

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

// 監(jiān)聽目標(biāo)元素
io.observe(document.getElementById('container'))
// 停止監(jiān)聽
io.unobserve(document.getElementById('container'))

const weakMap = new WeakMap()

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

// 元素進(jìn)入可視區(qū) 要執(zhí)行的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) {
// ---------- 第三歩 ------------
      // 取出函數(shù)
      const el=entrie.target
      const fun = weakMap.get(el)

      // 圖片懶加載要設(shè)置src屬性 需要特殊處理
      const isImg = el.tagName === "IMG"

      if(isImg){
        el.src=(await fun()).default
      }else{
        // 執(zhí)行函數(shù)
        fun()
      }

      // 停止監(jiān)聽
      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/...")" />

// 處理圖片加載成功的函數(shù)
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) {
// ---------- 第三歩 ------------
      // 取出函數(shù)
      const el = entrie.target
      const fun = weakMap.get(el)

      // 執(zhí)行函數(shù)
      fun(el)

      // 停止監(jiān)聽
      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>
// 引入四舍五入函數(shù),默認(rèn)取小數(shù)點(diǎn)后兩位
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")

      // 在目標(biāo)元素可見時(shí) 執(zhí)行這個(gè)函數(shù) 把屬性添加到元素上
      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"
/>

// 引入防抖 和 節(jié)流 方法
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)

    // 監(jiān)聽滾動(dòng)和調(diào)整大小事件
    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,
    }
  }

  // 檢查目標(biāo)元素與根元素的相交情況
  checkIntersections() {
    const rootRect = this.getRootRect()

    const entries = []

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

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

      // 交叉區(qū)域
      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

      // 交叉區(qū)域 占目標(biāo)元素的比例 
      // 注意: 圖片還不可見時(shí), 沒有加載資源, 也就沒有高度, 相交區(qū)域也為0, 但是實(shí)際上img可能已經(jīng)進(jìn)入可視區(qū)了, 需要特殊判斷一下
      const intersectionRatio = targetArea > 0 ? intersectionArea / targetArea : isIntersecting ? 1 : 0

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

    // 有元素可見才觸發(fā)callback, 實(shí)際上IntersectionObserver API不可見時(shí)也會(huì)觸發(fā)一次,但是v-lazy沒有用到不可見的這次觸發(fā),所以不用管
    if (entries.some((item) => item.intersectionRatio > 0)) {
      this.callback(entries)
    }
  }

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

      // 因?yàn)榭赡苡械脑匾婚_始就在可視區(qū) 但是添加的監(jiān)聽只有觸發(fā)scroll事件才會(huì)檢查相交情況
      // 所以需要等待所有元素都添加監(jiān)聽完成后再統(tǒng)一執(zhí)行一次 checkIntersections 方法,檢查相交情況
      // 這里利用防抖可以實(shí)現(xiàn), 因?yàn)榉蓝对谝欢螘r(shí)間內(nèi)高頻觸發(fā)只會(huì)執(zhí)行最后一次
      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