vue中用JavaScript写懒加载

在Vue中实现图片懒加载的方式有很多种，其中一种比较常用的方式是使用Intersection Observer API。

Intersection Observer API 可以在元素进入和退出浏览器的可视区域时触发回调函数。我们可以利用这个特性来实现图片的懒加载。

下面是一个基本的实现方式：

1. 在img标签中添加一个data-src属性，用于存放图片的真实地址。

<template>
  <div>
    <img v-for="img in imgList" :key="img.id" :src="img.src" :data-src="img.realSrc" class="lazyload" />
  </div>
</template>

2. 在Vue的mounted生命周期中初始化Intersection Observer，并监听每个带有lazyload类名的img标签。

<script>
export default {
  data() {
    return {
      imgList: [
        {
          id: 1,
          src: '占位图片地址',
          realSrc: '真实图片地址'
        },
        {
          id: 2,
          src: '占位图片地址',
          realSrc: '真实图片地址'
        }
      ]
    }
  },
  mounted() {
    const lazyloadImages = document.querySelectorAll('.lazyload')
    const options = {
      rootMargin: '50px',
      threshold: 0.01
    }

    if ('IntersectionObserver' in window) {
      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const lazyloadImage = entry.target
            lazyloadImage.src = lazyloadImage.dataset.src
            observer.unobserve(lazyloadImage)
          }
        })
      }, options)

      lazyloadImages.forEach(lazyloadImage => {
        observer.observe(lazyloadImage)
      })
    }
  }
}
</script>

这样就可以实现图片的懒加载了。当图片进入可视区域时，Intersection Observer会把图片的data-src属性值赋给src属性，从而实现图片的加载。