图片懒加载

懒加载方法一 lazyload插件

vue-lazyload的核心原理是利用了IntersectionObserverAPI，这是一个用于检测元素是否与视口相交的API，它可以高效地监听元素的可见性变化，并触发回调函数。
vue-lazyload在注册插件时，会创建一个全局的IntersectionObserver实例，并设置一些选项，如阈值（threshold）、根元素（root）等。然后，在绑定v-lazy指令时，会创建一个监听器（listener）对象，并将其添加到一个监听器队列（listenerQueue）中。每个监听器对象都包含了元素的相关信息，如状态（state）、图片地址（src）等。
接下来，vue-lazyload会遍历监听器队列，并调用IntersectionObserver实例的observe方法，将每个元素注册到观察者中。当元素与视口相交时，IntersectionObserver实例会触发回调函数，并传入一个entries参数，表示所有被观察的元素的状态信息。vue-lazyload会根据entries中的isIntersecting属性判断元素是否可见，如果是，则调用监听器对象的load方法，将元素的src或者style属性替换为真实的图片地址，并将该监听器对象从队列中移除。

npm i vue-lazyload@1.2.3 -S
import VueLazyload from 'vue-lazyload'
//全局注册
Vue.use(VueLazyload, {
  //参数配置 可不填
  
  // 懒加载默认加载图片
  loading: 'xxx.png',
  // 加载失败后加载的图片
  error: 'xxx.png',
  preLoad: 1.3, // 预加载高度的比例
  attempt: 3 // 尝试加载次数
})

<!-- 懒加载img标签 -->
<img v-lazy="imgUrl" />

<!-- 懒加载背景图片 -->
<div v-lazy:background-image="bgUrl"></div>

v-lazy指令接收一个字符串类型的值，表示图片的地址。如果是背景图片，需要在指令后加上:background-image修饰符(注意冒号)。
当页面滚动时，vue-lazyload会检测元素是否进入可视区域，如果是，则替换元素的src或者style属性，从而实现懒加载。

懒加载方法二 loading=“lazy”

HTML新增 loading属性

<img src="xxx.png" loading="lazy">