vue封装指令，配合IntersectionObserver实现图片懒加载

1.新建plugin.js文件：

const LazyLoadPlugin = {
  install(Vue) {
    Vue.directive('lazy', {
      // 在绑定元素插入到 DOM 中
      inserted: function (el, binding) {
        // IntersectionObserver API 检测元素是否进入视口
        const observer = new IntersectionObserver(entries => {
          if (entries[0].isIntersecting) {
            // 加载图片
            el.src = binding.value;
            // 停止观察该元素
            observer.unobserve(el);
          }
        });
        // 开始观察该元素
        observer.observe(el);
      }
    });
  }
};

export default LazyLoadPlugin;

2.在main.js里注册：

// main.js

import Vue from 'vue';
import App from './App.vue';
import LazyLoadPlugin from './lazyLoadPlugin';

Vue.use(LazyLoadPlugin);

new Vue({
  render: h => h(App)
}).$mount('#app');

<template>
  <img v-lazy="'path_to_your_image.jpg'" alt="Lazy Loaded Image">
</template>