图片懒加载

IntersectionObserver：一种异步方法可以监听目标元素是否展示到视口（viewport）

常见的需求场景：

1. 图片懒加载
2. 滚动动画

<template>
  <div class="load-img-container">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem,
      voluptatem. Fuga minus vitae reiciendis! Odio laudantium doloribus, totam,
      iusto ad amet in, necessitatibus quasi eveniet dolorum doloremque maxime.
      Et, laudantium. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    </p>
    <div class="img-container">
      <div v-for="v in list" :key="v.src">
        <img :data-src="v.src" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ElementVueTestLoadImg",

  data() {
    return {
      list: [
        {
          src: require("./../assets/a.jpeg"),
        },
        {
          src: require("./../assets/b.jpeg"),
        },
        {
          src: require("./../assets/c.jpeg"),
        },
        {
          src: require("./../assets/d.jpeg"),
        },
        {
          src: require("./../assets/e.jpeg"),
        },
        {
          src: require("./../assets/f.jpeg"),
        },
        {
          src: require("./../assets/g.jpeg"),
        },
      ],
    };
  },

  mounted() {
    ((doc) => {
      let imgs = doc.querySelectorAll("img"); //   console.log(imgs);
      function lazyLoading() {
        let observer = new IntersectionObserver((entires) => {
          console.log(entires);
          entires.forEach((item) => {
            // 获取到原来图片的元素
            let oImg = item.target;
            if (item.intersectionRatio > 0 && item.intersectionRatio <= 1) {
              oImg.setAttribute("src", oImg.dataset.src);
              observer.unobserve(item.target);
            }
          });
        });
        imgs.forEach((item) => {
          observer.observe(item);
        });
      }
      lazyLoading();
    })(document);
  },

  methods: {},
};
</script>

<style scoped>
.load-img-container {
  font-size: 16px;
  line-height: 40px;
}
</style>