图片懒加载效果图，没有图片时默认展示require(‘@/assets/images/public/acquiesce.png’)

test.vue 文件

<template>
  <div class="scrollLoading">
    <img class="img" ref="IMG" v-for="(item, i) in arr" :data-src="item.imgUrl" 
      :src="require('@/assets/images/public/acquiesce.png')" :key="i">
  </div>
</template>

<script>
export default {
  data() {
    return {
      subsidiary: this.$FN.elVisible(this.fn, { visible: false, rootMargin: "0px" }),
      arr: [
        { imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e1aaa3886c7be24076be' },
        { imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e1d2a3886c7be24076c2' },
        { imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e28da3886c7be24076d4' },
        { imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e1aaa3886c7be24076be' },
        { imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e1d2a3886c7be24076c2' },
        { imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e28da3886c7be24076d4' },
        { imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e1aaa3886c7be24076be' },
        { imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e1d2a3886c7be24076c2' },
      ],
    }
  },
  mounted() {
    this.getRef();
  },
  methods: {
    fn(target, data, subsidiary) {
      console.log(target, data, subsidiary,33)
      let src = require("@/assets/images/public/acquiesce.png");
      let index = Math.floor( Math.random()*8) 
      if (target.src)  {
          src = this.arr[index].imgUrl;
          target.src = src;
      }
      subsidiary.unobserve(target);
    },
    getRef() { let refs = this.$refs.IMG; this.subsidiary(refs) },
  }
}
</script>

<style lang="less" scoped>
.img {
  width: 200px;
  height: 150px;
  margin: 50px;
  display: block;
}
</style>

public/index.js

export function elVisible(fn = () => null, config = {}) {
  // visible = true 元素不可见时也返回事件,否则我只需要元素可见时触发
  // threshold = 0 监听元素出现交叉就触发 / = 1 元素必须完全出现才触发 / = 0.5 元素出现一半就触发
  // rootMargin 扩张 向内或向外扩张交叉区域
  let { visible = false, ...rest } = config;
  let configs = { threshold: 0, rootMargin: "-50%", ...rest };
  const observe = entries => {
    for (const { isIntersecting = false, target = {} } of entries) {
      // created && created(target);
      if (visible) {
        fn && fn(target, isIntersecting)
      } else {
        isIntersecting && fn && fn(target, isIntersecting, subsidiary)
      };
    };
  };
  let subsidiary = new IntersectionObserver(observe, configs);
  const carryOut = refs => {
    let fn = item => subsidiary.observe(item.$el || item);
    let arrFn = () => refs && refs.map(item => subsidiary.observe(item.$el || item));
    switch (dataType(refs)) {
      case "HTMLImageElement": fn(refs); break; // 监听一个dom
      case "HTMLDivElement": fn(refs); break; // 监听一个dom
      case "Array": arrFn(refs); break; // 监听多个dom
      default: return false;
    };
  };
  return carryOut;
};

main.js

import * as FN from '@/public';
  Vue.prototype.$FN = FN;