巧用Vue自定义指令：分分钟教你实现图片懒加载

2023-11-09 08:24:59

前言：图片懒加载的必要性

图片懒加载是一种延迟加载技术的简称，简单来说就是在页面进入初始时不会马上开始加载图片，而是等到浏览器检测到该元素进入可视区域后才进行加载，从而减少页面初始加载的资源开销，提升用户体验，减少不必要的网络流量占用。因此，在许多Vue项目中，图片懒加载都是一个常见的优化项，尤其是在那些需要展示大量图片的页面上，如商品列表页或社交媒体动态流页面。

基于Vue自定义指令实现图片懒加载

创建自定义指令

在Vue中，自定义指令是扩展Vue功能的强大工具，我们可以通过创建自定义指令来实现图片懒加载。要创建自定义指令，我们需要在Vue实例中使用Vue.directive()方法，该方法接受两个参数：指令名称和指令对象。指令对象定义了指令的行为，包括指令的钩子函数、绑定的属性和方法等。

图片懒加载自定义指令的实现

Vue.directive('lazyload', {
  bind: function (el, binding) {
    // 获取图片源地址
    const src = binding.value;

    // 设置图片的占位符
    el.setAttribute('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');

    // 创建一个观察器，监听图片是否进入可视区域
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 图片进入可视区域，加载图片
          el.setAttribute('src', src);

          // 停止观察器，因为图片已经加载完成
          observer.unobserve(el);
        }
      });
    });

    // 观察图片元素
    observer.observe(el);
  },
});

使用图片懒加载自定义指令

在创建了图片懒加载自定义指令后，我们就可以在Vue组件中使用它了。在组件模板中，我们可以使用v-lazyload指令来标记需要懒加载的图片元素。指令的值应该设置为图片的源地址。

<template>
  <img v-lazyload="imageUrl" alt="Image">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
    };
  },
};
</script>