vue 图片懒加载Demo

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、图片懒加载的作用

图片懒加载是一种优化网页加载性能的技术。其基本思想是在页面加载时，只加载视口（viewport）内的图片，而将视口外的图片延迟加载。当用户滚动页面，使得这些图片进入视口时，再去加载这些图片。
图片懒加载的主要作用有：

1、提高页面加载速度：页面在加载时不需要立即加载所有的图片，只需要加载视口内的图片，可以大大减少页面的初始加载时间。

2、节省带宽：对于那些用户可能永远不会滚动到的图片，如果使用了懒加载，那么这些图片就不会被下载，从而节省了带宽。

3、提高用户体验：由于页面加载速度的提高，用户不需要等待所有的图片都加载完成就可以开始浏览页面，从而提高了用户体验。

在 Vue 中，你可以使用第三方库如 vue-lazyload 来实现图片的懒加载。
不过我们这里手搓一个。

二、案例demo

1.导入文件

代码如下（示例）：

//在ts中导入文件
let imgList:Record<string,{default:string}> = import.meta.glob('@/assets/imgLoding/*.*', { eager: true })
let arr = Object.values(imgList).map(v => v.default)

2.定义自定义指令

代码如下（示例）：

let vLazy:Directive<HTMLImageElement,string>=async (el,bingding) => {
    const def = await import('@/assets/lazy.png')
    el.src = def.default;
    // 判断当前元素有没有在可视区域内出现
    const observer = new IntersectionObserver((enr) => { 
        console.log(enr)
        // 判断当前元素有没有在可视区域内出现 当图片被显示时替换src加在
        if (enr[0].intersectionRatio > 0){
                el.src = bingding.value
                observer.unobserve(el)
        }
    })
    observer.observe(el)
}

3.图片使用自定义懒加载指令

代码如下（示例）：

 <img width="300" height="300" v-for="(item,index) in arr" :key="index" v-Lazy="item" alt="">

---