面试题：Vue项目中实现图片懒加载的常用方案有哪些

Question

在Vue项目里，为了提升页面性能，图片懒加载是一项重要技术。请列举至少两种在Vue项目中实现图片懒加载的常用方案，并简要说明每种方案的原理。

Answer 1

• 方案一：使用 vue-lazyload 插件
  • 原理：vue-lazyload 插件通过指令（如 v-lazy）来实现图片的懒加载。它会监听图片元素进入浏览器的可视区域，当图片即将进入或已经进入可视区域时，才将图片的真实 src 赋值给图片标签，从而触发图片加载。其内部利用了 IntersectionObserver API 来高效地监听元素与视口的相交变化情况，如果浏览器不支持该 API 则会采用 scroll 事件模拟实现。
• 方案二：基于 IntersectionObserver 手动实现
  • 原理：IntersectionObserver 是浏览器原生提供的 API，它允许异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉变化的情况。在 Vue 项目中，可以在组件的 mounted 钩子函数中创建 IntersectionObserver 实例，观察图片元素。当观察到图片元素与视口的相交比例达到一定阈值（通常设为 0 及以上，表示开始进入视口）时，就将图片的真实 src 赋值给图片标签，触发图片加载。这种方式更加灵活，可根据具体需求定制懒加载的逻辑和阈值等。