調(diào)用方式，express寫個(gè)后臺(tái)服務(wù)調(diào)圖片，具體使用不貼了

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 // 倍數(shù) });

使用指令

<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 表示在捕獲階段調(diào)用事件處理程序，false（默認(rèn)值）表示在冒泡階段調(diào)用事件處理程序}const lazyImg = new Lazyimg({el,src: bindings.value,options: this.options,imgRender: this.imgRender.bind(this)})// 圖片池this.lazyImgPool.push(lazyImg);this.handleScroll(); // 初始化時(shí)顯示一部分可視區(qū)域內(nèi)的圖片})}handleScroll() {let isVisible = false;this.lazyImgPool.forEach(lazyImg => {if (!lazyImg.loaded) { // 未加載isVisible = lazyImg.checkIsVisible() //檢測(cè)是否出現(xiàn)在區(qū)域內(nèi)isVisible && lazyImg.loadImg() // 出現(xiàn)了加載圖片}})}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 //加載完沒(méi)this.state = { // 狀態(tài)loading: false,error: false}}checkIsVisible() {// 當(dāng)前圖片距離最頂端距離是多少來(lái)判斷const {top} = this.el.getBoundingClientRect();return top < window.innerHeight * (this.options.preload || 1.3); // 小于倍數(shù)}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) {// 查找父節(jié)點(diǎn)是否有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;}) }

總結(jié)

以上是生活随笔為你收集整理的手写vue2的Lazyload的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。