vue3实现图片懒加载

1.目的

当图片进入可视区域内去加载图片，且处理加载失败，封装成指令

2.具体实现

2.1 在src/components/library/index.js定义指令

import defaultImg from '@/assets/images/200.png'
const defineDirective=(app)=>{
	//扩展自定义指令，lazyload是指令名称
	app.directive('lazyload',{
   //vue2规则：inserted
   //inserted(){}
   //vue3规则：mounted
   mounted(el,bindinds){
    //el表示使用指令的Dom元素
    //bingdings是《img src="http://...."》图片地址
    //1.监听图片进入可视区域
    const observer=new IntersectionObserver(([{isIntersecting}])=>{
 	if(isIntersecting){//如进入了可视区
 	  //2.给图片的src属性赋值图片的地址
 	  el.src=bindinds.value
 	  //3.取消图片监听
 	  observer.unobserver(el)
 	  //4.加载图片失败了，显示默认图片地址
 	  el.onerror=()=>{
       el.src=defaultImg
      }
 	 }
    })
    observer.observe(el)
   }
 })
}
export default{
 install(app){
  //自定义指令
  defineDirective(app)
 }
}

2.2使用指令

<template>
  <div class="goods-item">
    <RouterLink to="/" class="image">
      <img v-lazyload="goods.picture" alt="">
    </RouterLink>
    <p class="name ellipsis-2">{{goods.name}}</p>
    <p class="desc ellipsis">{{goods.desc}}</p>
    <p class="price">&yen;{{goods.price}}</p>
    <div class="extra">
      <RouterLink to="/">
        <span>找相似</span>
        <span>发现现多宝贝 &gt;</span>
      </RouterLink>
    </div>
  </div>
</template>