图片懒加载

有时服务器一次返回图片数据很大，一次加载完需要耗费很长时间，这时候，图片懒加载就体现优势

方法一：

通过设置img的src属性来实现懒加载，通过require模拟服务器返回数据

<template>

  <div class="content" ref="content">

    <template v-for="(item, index) in imgs" :key="index">

      <img src="./imgs/1.png" :my-data="item" alt="图片加载中" />

    </template>

  </div>

</template>

<script>

export default {

  name: "app",

  data() {

    return {

      imgs: [],

    };

  },

  created() {

    const context = require.context("./imgs", true, /\.png$/); // 根据路径正则读取文件

    for (let i = 0; i <= 24; i++) {

      let imgName = `./prefix_${i}.png`;

      const Img = context(imgName).default;

      this.imgs.push(Img);

    }

  },

  mounted() {

    //获取全部img标签

    let images = document.getElementsByTagName("img");

    window.addEventListener("scroll", (e) => {

      //当发生滚动事件时调用ergodic事件

      ergodic();

    });

    function ergodic() {

      // 遍历每一张图

      for (let i of images) {

        //判断当前图片是否在可视区内

        if (i.offsetTop <= window.innerHeight + window.scrollY) {

          //console.log(i.offsetTop, window.innerHeight, window.scrollY);

          //获取自定义data-src属性的值

          let trueSrc = i.getAttribute("my-data");

          //把值赋值给图片的src属性

          i.setAttribute("src", trueSrc);

        }

      }

    }

    //没发生滚动事件时也要先执行一次

    ergodic();

  },

};

</script>