图片懒加载
什么是懒加载？
懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。 如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在图片进入可视区域后才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。
实现图片懒加载
1.首先准备一些图片,并获取到这些图片的url。
<div style="width: 100vw;height: 100vh;">
<img v-for="item in arr" width="250" height="400" style="display: block;text-align: center ;">
</div>
// 获取图片
let imageList: Record<string, { default: string }> = import.meta.glob('./staick/image/*.*', { eager: true })
let arr = Object.values(imageList).map((v) => v.default)
2.获取一个加载的图片给image标签。
import { type Directive } from 'vue';
// 获取图片
const vLazy: Directive<HTMLImageElement, string> = async (el, bingding) => {
const ref = await import('./assets/js.webp')
el.src = ref.default
}
3.如何监听到用户滚动页面到图片展示出来? javascript提供了一个API Intersection Observer API
MDN Web Docs官网举了一个例子 使用IntersectionObserver.observe() 这个API可以监听一个目标元素,我们打印一下这个entries看看会输出什么。
在IntersectionObserverEntry里面有很多的属性，我们在官网看一下这些属性都代表什么意思
IntersectionObserverEntry属性
其中有一个IntersectionObserverEntry.intersectionRatio的属性，他代表的意思就是目标元素target和浏览器窗口相交的比例，通俗来说这个元素在当前页面中你能看到多少部分，完全看到就是1 上面第一张图片完全展示intersectionRatio=1 底下这张intersectionRatio=0.6520000100135803
4.接下来就很简单了，我们只需要进行一个if判断就行,再使用v-lazy=‘item’
const vLazy: Directive<HTMLImageElement, string> = async (el, bingding) => {
const ref = await import('./assets/js.webp')
el.src = ref.default
const intersectionObserver = new IntersectionObserver((entries) => {
console.log(entries);
if (entries[0].intersectionRatio > 0) {
setTimeout(() => {
el.src = bingding.value
intersectionObserver.unobserve(el)
}, 1000)
}
})
intersectionObserver.observe(el)
}
