手写vue2的Lazyload

调用方式，express写个后台服务调图片，具体使用不贴了

import VueLazyload from "./modules/vue-lazyload";

Vue.use(VueLazyload,{
  loading: 'http://localhost:3000/images/loading.gif',
  error: 'http://localhost:3000/images/error.jpg',
  preload: 1 // 倍数
});

使用指令

<img v-lazy="item.src" :alt="item.title">

vueLazyload/index.js

import Lazyload from './Lazyload';
const VueLazyload = {
  install(Vue, options) {
    const LazyClass = Lazyload(Vue)
    const lazyload = new LazyClass(options);
    Vue.directive('lazy', {
      bind: lazyload.bindLazy.bind(lazyload)
    })
  }
}
export default VueLazyload;

vueLazyload/Lazyload.js

import Lazyimg from "./Lazyimg";
import {
  getScrollParent
} from "./utils";

// 柯里化
export default function Lazyload(Vue) {
  return class Lazy {
    constructor(options) {
      this.options = options;
      this.isAddScrollListener = false;
      this.lazyImgPool = [];
    }
    bindLazy(el, bindings, vnode) {
      // console.log(this.options);
      // 还未渲染
      Vue.nextTick(() => {
        const scrollParent = getScrollParent(el);
        // console.log('scrollParent', scrollParent);
        if (scrollParent && !this.isAddScrollListener) {
          scrollParent.addEventListener('scroll', this.handleScroll.bind(this), false)
          //true 表示在捕获阶段调用事件处理程序，false（默认值）表示在冒泡阶段调用事件处理程序

        }
        const lazyImg = new Lazyimg({
          el,
          src: bindings.value,
          options: this.options,
          imgRender: this.imgRender.bind(this)
        })
        // 图片池
        this.lazyImgPool.push(lazyImg);
        this.handleScroll(); // 初始化时显示一部分可视区域内的图片
      })
    }
    handleScroll() {
      let isVisible = false;
      this.lazyImgPool.forEach(lazyImg => {
        if (!lazyImg.loaded) { // 未加载
          isVisible = lazyImg.checkIsVisible() //检测是否出现在区域内
          isVisible && lazyImg.loadImg() // 出现了加载图片

        }
      })
    }
    imgRender(lazyImg, state) {
      const {
        el,
        options
      } = lazyImg;
      const {
        loading,
        error
      } = options;
      let src = '';
      switch (state) {
        case 'loading':
          src = loading || '';
          break;
        case 'error':
          src = error || '';
          break;
        default:
          src = lazyImg.src;
          break;
      }
      el.setAttribute('src', src);
    }
  }
}

vueLazyload/Lazyimg.js

/* 处理每张图片的类 */
import {
  imgLoad
} from "./utils";
export default class Lazyimg {
  constructor({
    el,
    src,
    options,
    imgRender
  }) {
    this.el = el
    this.src = src
    this.options = options

    this.imgRender = imgRender //渲染事件
    this.loaded = false //加载完没
    this.state = { // 状态
      loading: false,
      error: false
    }
  }
  checkIsVisible() {
    // 当前图片距离最顶端距离是多少来判断
    const {
      top
    } = this.el.getBoundingClientRect();
    return top < window.innerHeight * (this.options.preload || 1.3); // 小于倍数
  }
  loadImg() {
    this.imgRender(this.el, 'loading');

    imgLoad(this.src).then(() => {
      this.state.loading = true;
      this.imgRender(this, 'ok');
      this.loaded = true;
    }, () => {
      this.state.error = true;
      this.imgRender(this, 'error');
      this.loaded = true;
    })
  }
}

vueLazyload/utils.js

export function getScrollParent(el) {
  let _parent = el.parentNode;

  while (_parent) {
    // 查找父节点是否有style overflow:auto
    const styleOverflow = window.getComputedStyle(_parent)['overflow'];

    if (/(scroll)|(auto)/.test(styleOverflow)) {
      return _parent;
    }
    _parent = _parent.parentNode;
  }
}
export function imgLoad(src) {
  return new Promise((resolve, reject) => {
    const oImg = new Image();
    oImg.src = src;
    oImg.onload = resolve;
    oImg.onerror = reject;
  })
}