当前位置：首页 > VUE

vue实现图片滚动加载

2026-02-24 04:10:59VUE

Vue 实现图片滚动加载

监听滚动事件

通过 window.addEventListener 监听滚动事件，判断图片是否进入可视区域。在 Vue 的 mounted 钩子中绑定事件，并在 beforeDestroy 钩子中移除事件，避免内存泄漏。

mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const imgs = document.querySelectorAll('img[data-src]');
    imgs.forEach(img => {
      if (this.isInViewport(img)) {
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
      }
    });
  },
  isInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
      rect.top <= window.innerHeight &&
      rect.bottom >= 0 &&
      rect.left <= window.innerWidth &&
      rect.right >= 0
    );
  }
}

使用 Intersection Observer API

Intersection Observer API 提供更高效的滚动监听方式，避免频繁计算。创建一个观察器实例，观察所有带有 data-src 属性的图片元素。

vue实现图片滚动加载

mounted() {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  document.querySelectorAll('img[data-src]').forEach(img => {
    observer.observe(img);
  });
}

图片占位与懒加载

在 HTML 中使用 data-src 存储实际图片地址，初始时使用占位图或空白 src。通过 CSS 控制占位图样式，确保布局稳定。

vue实现图片滚动加载

<img data-src="real-image.jpg" src="placeholder.jpg" class="lazy-img">

性能优化

结合 throttle 或 debounce 减少滚动事件触发频率。使用 requestAnimationFrame 优化滚动处理逻辑。

import { throttle } from 'lodash';
methods: {
  handleScroll: throttle(function() {
    window.requestAnimationFrame(() => {
      const imgs = document.querySelectorAll('img[data-src]');
      imgs.forEach(img => {
        if (this.isInViewport(img)) {
          img.src = img.dataset.src;
          img.removeAttribute('data-src');
        }
      });
    });
  }, 200)
}

动态加载图片资源

对于动态渲染的图片列表（如通过 v-for），在数据更新后手动触发检查逻辑。可在 updated 钩子中调用观察逻辑。

updated() {
  this.$nextTick(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    });
    document.querySelectorAll('img[data-src]').forEach(img => {
      observer.observe(img);
    });
  });
}