vue项目用inersectionobserve实现图片懒加载

vue项目用inersectionobserve实现图片懒加载

使用Intersection Observer实现图片懒加载在Vue项目中也是非常容易的，下面是一个简单的示例代码：

<template>
  <div>
    <img :src="loaded ? imgUrl : ''" style="width: 100%; height: auto;" v-lazyload />
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: 'https://example.com/image.jpg',
      loaded: false
    }
  },
  mounted() {
    const observer = new IntersectionObserver((entries) => { // 创建交叉观察器实例
      if (entries[0].intersectionRatio > 0 && !this.loaded) { // 如果进入视窗且未加载过
        console.log('Image in viewport');
        this.loaded = true; // 修改状态，表示已经加载过了
      }
    });
    observer.observe(this.$el); // 监听当前组件元素是否进入或离开视窗
  }
}
</script>

在上面的代码中，我们首先将标签绑定到一个动态属性，并设置占位符为空字符串或占位图。接着，在mounted()钩子函数中创建了一个交叉观察器实例，并调用observe()方法监听当前组件元素是否进入或离开视窗。在回调函数中，如果元素进入视窗且未加载过图片，则将状态修改为已加载，并渲染图片。

需要注意的是，在使用Intersection Observer实现图片懒加载时，应该将标签绑定到一个动态属性并设置占位符，避免页面出现大量空白区域。同时也要注意性能问题，不要监听过多的元素导致页面卡顿。

另外，如果需要支持较老的浏览器或移动端设备，可以使用第三方库vue-lazyload来实现图片懒加载，它内部就是基于Intersection Observer实现的。

希望这些内容能够对您有所帮助！