vue自定义指令图片懒加载

### Vue.js 自定义指令实现图片懒加载

#### 创建 Vue 应用实例
为了创建一个支持懒加载的 Vue 应用程序，首先需要初始化应用实例：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

#### 定义自定义指令 `v-img-lazy`
通过`app.directive()`注册一个新的全局自定义指令来处理图像懒加载逻辑[^2]。

app.directive('img-lazy', {
  mounted(el, binding) {
    let img = new Image();
    img.src = binding.value;
    
    // 使用 Intersection Observer API 来检测目标元素何时进入视口
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          el.src = entry.target.dataset.src; // 将实际URL赋给src属性
          observer.unobserve(entry.target);  // 取消观察已加载完成的图片
        }
      });
    });

    // 开始监视指定的目标节点
    observer.observe(el);
  }
});

此代码片段展示了如何利用浏览器原生的支持——Intersection Observer API，在不阻塞主线程的情况下高效地实现了图片懒加载功能。每当带有特定类名或特性的DOM元素滚动到可视区域内时触发回调函数，并设置真实的源路径以显示完整的高质量版本图像[^3]。