useIntersectionObserver实现图片懒加载解决方案

使用VueUse的useIntersectionObserver函数来实现如果不使用图片懒加载页面渲染图片时会一次性返回所有的img资源请求会非常多那么如何在进入可视区域的时候再进行加载来优化呢可以使用Vue的自定义指令结合VueUse提供的useIntersectionObserver函数来实现图片懒加载最终实现的图片懒加载结果如下实现步骤1.安装第三方依赖npm i vueuse/core2.在main.ts中注册全局自定义组件// 全局自定义指令app.directive(imgLazy,{mounted(el){// 1.先把img标签的src属性值保存起来constcurrentSrcel.src// 2.将src属性置为空或默认图片el.srchttps://res.lgdsunday.club/img-load.png// 3.创建一个观察者对象来观察当前img标签是否进入可视区const{stop}useIntersectionObserver(el,([entry]){if(entry?.isIntersecting){el.srccurrentSrc;console.log(图片进入可视区加载图片);// 4.图片加载完成后停止观察stop()}})}});3.在页面中使用自定义指令templatedivclasscontainerdivstyledisplay:grid;grid-template-columns:repeat(6,1fr);grid-gap:20px;divv-foritem in list:keyitem.idclassitemimgv-imgLazy:srcitem.imgUrlaltdivclasstitle{{ item.title }}/div/div/div/div/template