调用方式，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 = elthis.src = srcthis.options = optionsthis.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:autoconst 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;})
}