1. v-lazy

v-lazy是一个vue封装好的一个图片懒加载工具,具体使用方式
1.安装依赖:npm install vue-lazyload

2.在main.js中全局配置
/ 引入全局依赖

import VueLazyload from 'vue-lazyload';
 
// 配置懒加载属性
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: require('图片地址'), // 报错时候的图片
  loading: require('图片地址'), //加载时候的图片
  attempt: 1
});

3. 页面中使用

template>
  <div class="about">
    <img  v-lazy="src">
  </div>
</template>
 
<script>
export default{
  data(){
    return{
      src:'图片链接'
    }
  }
}
</script>

2. js手写

// utils/ 写一个工具
 
window.onload = function () {
  const imgs = document.querySelectorAll('img');
 
  function getTop (e) {
    return e.offsetTop;
  }
 
  function lazyload (imgs) {
    // 可视区高度
    const h = window.innerHeight;
    // 滚动区域高度
    const s = document.body.scrollTop || document.documentElement.scrollTop;
    for (let i = 0; i < imgs.length; i++) {
      if ((h + s) > getTop(imgs[i])) {
        (function (i) {
          setTimeout(function () {
            // 不加立即执行函数i会等于9
            // 隐形加载图片或其他资源，
            // 创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
            const temp = new Image();
            temp.src = imgs[i].getAttribute('data-src');// 只会请求一次
            // onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
            temp.onload = function () {
              // 获取自定义属性data-src，用真图片替换假图片
              imgs[i].src = imgs[i].getAttribute('data-src');
            };
          }, 1000);
        })(i);
      }
    }
  }
  lazyload(imgs);
  // 滚屏函数
  window.onscroll = function () {
    lazyload(imgs);
  };
};