当前位置：首页 > VUE

vue实现图片滚动加载

2026-01-23 13:34:28VUE

实现图片滚动加载的方法

在Vue中实现图片滚动加载（懒加载）可以通过以下方法完成：

使用Intersection Observer API

Intersection Observer API是现代浏览器提供的原生API，用于检测元素是否进入视口。

// 在Vue组件中
export default {
  data() {
    return {
      images: [
        { src: 'placeholder.jpg', loaded: false }
      ]
    }
  },
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target
          const src = img.dataset.src
          img.src = src
          observer.unobserve(img)
        }
      })
    }, {
      threshold: 0.1
    })

    document.querySelectorAll('[data-src]').forEach(img => {
      observer.observe(img)
    })
  }
}

<!-- 模板部分 -->
<img v-for="image in images" 
     :key="image.src" 
     :data-src="image.src" 
     :src="image.loaded ? image.src : 'placeholder.jpg'">

使用vue-lazyload插件

vue-lazyload是专门为Vue设计的懒加载插件，使用简单。

安装插件：

npm install vue-lazyload

在main.js中配置：

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'error.png',
  loading: 'loading.gif',
  attempt: 1
})

组件中使用：

<img v-lazy="imageUrl">

自定义滚动事件监听

对于需要兼容旧浏览器的场景，可以使用传统的滚动事件监听。

vue实现图片滚动加载

export default {
  methods: {
    checkInView() {
      const images = document.querySelectorAll('[data-src]')
      images.forEach(img => {
        const rect = img.getBoundingClientRect()
        if (rect.top < window.innerHeight && rect.bottom > 0) {
          img.src = img.dataset.src
        }
      })
    }
  },
  mounted() {
    window.addEventListener('scroll', this.checkInView)
    this.checkInView()
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.checkInView)
  }
}