自定义图片懒加载指令

// 懒加载指令
Vue.directive('lazy', {
  inserted: function (el, binding) {
    // 创建一个 IntersectionObserver 对象
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        // 如果图片进入可视区域
        if (entry.isIntersecting) {
          // 将 data-src 的值赋给 src 属性
          el.src = el.dataset.src;
          // 停止观察
          observer.unobserve(el);
        }
      });
    });
    // 开始观察元素
    observer.observe(el);
  }
});