調用方式，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;}) }

總結

以上是生活随笔為你收集整理的手写vue2的Lazyload的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。