在vue中使用自定义指令实现图片懒加载

创建一个自定义指令：在Vue实例的directives属性中添加一个新的指令。这个指令可以接受一个绑定值（在这里是图片的URL），并根据需要在元素上添加一个src属性或background-image属性。

  inserted: function (el, binding) {
    // 绑定值为图片的URL
    const imgURL = binding.value;
    // 设置占位符图片
    el.style.backgroundImage = 'url(placeholder.png)';
    // 监听元素是否进入可视区域
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 加载图片
          el.style.backgroundImage = `url(${imgURL})`;
          // 停止监听
          observer.unobserve(el);
        }
      });
    });
    observer.observe(el);
  }
})

2.在需要进行懒加载的图片元素上使用自定义指令：将自定义指令绑定到需要进行懒加载的图片元素上。

<template>
  <div>
    <div v-for="image in images" :key="image.id">
      <div v-lazyload="image.url"></div>
    </div>
  </div>
</template>

3.在组件中添加图片数据：在组件中定义一个图片数据数组，并将这些图片的URL作为指令的绑定值。

  <div>
    <div v-for="image in images" :key="image.id">
      <div v-lazyload="image.url"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { id: 1, url: 'image1.jpg' },
        { id: 2, url: 'image2.jpg' },
        { id: 3, url: 'image3.jpg' },
        // ...
      ]
    }
  }
}
</script>

拓展： IntersectionObserver是一个用于监视目标元素与其父级或根元素交叉状态的API。它可以帮助我们轻松地检测元素何时进入或离开视图区域，并在交叉状态更改时触发回调函数。在web开发中，当我们需要处理诸如无限滚动、懒加载、元素动画等交叉状态的场景时，IntersectionObserver可以提供一种更高效、更可靠的解决方案。使用IntersectionObserver API，我们可以省去手动计算元素的位置和滚动事件监听的繁琐操作，从而减少了代码的复杂性和性能开销。 IntersectionObserver的基本用法非常简单，我们只需要创建一个IntersectionObserver实例并指定要监视的目标元素，然后在回调函数中处理交叉状态变化即可。

兼容性问题

当然也可以使用可以使用 vue-lazyload 插件实现图片懒加载。