vue 图片加载太慢怎么办_前端性能优化之图片懒加载（附vue自定义指令）

针对 Vue 图片加载太慢的问题，可以采用图片懒加载的技术进行优化。图片懒加载是一种延迟加载图片的方法，当用户滚动到需要显示图片的位置时再加载图片，可以有效地减少页面加载时间和带宽消耗。

具体实现方法可以通过自定义指令来完成：

1. 创建一个自定义指令 lazy，可以在 main.js 中全局注册：

Vue.directive('lazy', {
  inserted: function (el, binding) {
    let lazyImageObserver = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove('lazy');
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImageObserver.observe(el);
  }
});

2. 在需要懒加载的图片上添加 lazy 指令，并将图片的 src 设置为占位图，将真实图片的地址保存在 data-src 属性中：

<img v-lazy class="lazy" src="占位图地址" data-src="真实图片地址">

这样就完成了图片懒加载的优化。需要注意的是，IntersectionObserver 是一个新的 API，需要在不支持的浏览器上做兼容处理。