Vue如何加载图片？懒加载的详细流程

2023-09-06 06:52:32

作为一名经验丰富的开发人员，我将分享我在Vue项目中使用图片懒加载的经验和技巧。

1. 什么是图片懒加载？

图片懒加载是一种优化图片加载性能的技术。在使用图片懒加载之前，页面上的所有图片都会在页面加载时加载，这可能会导致页面加载速度变慢，特别是对于包含大量图片的页面。使用图片懒加载后，页面上的图片只有在滚动到图片所在的区域时才会加载。这可以显著提高页面的加载速度，尤其是在移动设备上。

2. 在Vue中实现图片懒加载

在Vue中实现图片懒加载非常简单。我们可以使用Vue提供的指令v-lazy来实现。v-lazy指令可以接受一个参数，该参数指定图片的源地址。当滚动到图片所在的区域时，v-lazy指令会自动将图片的源地址设置到<img>元素的src属性上。

<img v-lazy="imageSrc" alt="My image">

3. 优化图片加载性能

为了进一步优化图片加载性能，我们可以监听页面滚动事件，并使用防抖处理来减少滚动事件的触发次数。防抖处理是指在一定时间内只触发一次事件。

const scrollHandler = () => {
  // 计算图片是否在可视区域
  const images = document.querySelectorAll('img[v-lazy]');
  for (let i = 0; i < images.length; i++) {
    const image = images[i];
    const rect = image.getBoundingClientRect();
    if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
      // 图片在可视区域，设置图片的src属性
      image.src = image.getAttribute('data-src');
      // 移除滚动事件监听
      window.removeEventListener('scroll', scrollHandler);
    }
  }
};

window.addEventListener('scroll', debounce(scrollHandler, 100));