vue3+typescript實現圖片懶加載插件

github項目地址: github.com/murongg/vue…

求star 與 issues

我文采不好，可能寫的文章不咋樣，有什么問題可以在留言區評論，我會盡力解答

本項目已經發布到npm

安裝：

$ npm i vue3-lazyload# or$ yarn add vue3-lazyload

需求分析

支持自定義 loading 圖片，圖片加載狀態時使用此圖片 支持自定義 error 圖片，圖片加載失敗后使用此圖片 支持 lifecycle hooks，類似于 vue 的生命周期，并同時在 img 標簽綁定 lazy 屬性，類似于

<img src='http://www.wxshucaidpc.com/bcjs/...' lazy='loading'><img src='http://www.wxshucaidpc.com/bcjs/...' lazy='loaded'><img src='http://www.wxshucaidpc.com/bcjs/...' lazy='error'>

并支持：

img[lazy=loading] { /*your style here*/ } img[lazy=error] { /*your style here*/ } img[lazy=loaded] { /*your style here*/ }

支持使用 v-lazy 自定義指令，指定可傳入 string/object ，當為 string 時，默認為需要加載的 url，當為 object 時，可傳入

src: 當前需要加載的圖片 url loading: 加載狀態時所用到的圖片 error: 加載失敗時所用到的圖片 lifecycle: 本次 lazy 的生命周期，替換掉全局生命周期

目錄結構

- src---- index.ts 入口文件，主要用來注冊插件---- lazy.ts 懶加載主要功能---- types.ts 類型文件，包括 interface/type/enum 等等---- util.ts 共享工具文件

編寫懶加載類

懶加載主要通過 IntersectionObserver對象實現，可能有些瀏覽器不支持，暫未做兼容。

確定注冊插件時傳入的參數

export interface LazyOptions { error?: string; // 加載失敗時的圖片 loading?: string; // 加載中的圖片 observerOptions?: IntersectionObserverInit; // IntersectionObserver 對象傳入的第二個參數 log?: boolean; // 是否需要打印日志 lifecycle?: Lifecycle; // 生命周期 hooks}export interface ValueFormatterObject { src: string, error?: string, loading?: string, lifecycle?: Lifecycle;}export enum LifecycleEnum { LOADING = ’loading’, LOADED = ’loaded’, ERROR = ’error’}export type Lifecycle = { [x in LifecycleEnum]?: () => void;};

確定類的框架

vue3 的 Custom Directives，支持以下 Hook Functions：beforeMount 、mounted、beforeUpdate、updated、beforeUnmount、unmounted，具體釋義可以去 vue3 文檔查看，目前僅需要用到mounted、updated、unmounted，這三個 Hook。

Lazy 類基礎框架代碼，lazy.ts：

export default class Lazy { public options: LazyOptions = { loading: DEFAULT_LOADING, error: DEFAULT_ERROR, observerOptions: DEFAULT_OBSERVER_OPTIONS, log: true, lifecycle: {} }; constructor(options?: LazyOptions) { this.config(options) } /** * merge config * assgin 方法在 util.ts 文件內，此文章不在贅述此方法代碼，可在后文 github 倉庫內查看此代碼 * 此方法主要功能是合并兩個對象 * * @param {*} [options={}] * @memberof Lazy */ public config(options = {}): void { assign(this.options, options) } public mount(el: HTMLElement, binding: DirectiveBinding<string | ValueFormatterObject>): void {} // 對應 directive mount hook public update() {} // 對應 directive update hook public unmount() {} // 對應 directive unmount hook}

編寫懶加載功能

/** * mount * * @param {HTMLElement} el * @param {DirectiveBinding<string>} binding * @memberof Lazy */ public mount(el: HTMLElement, binding: DirectiveBinding<string | ValueFormatterObject>): void { this._image = el const { src, loading, error, lifecycle } = this._valueFormatter(binding.value) this._lifecycle(LifecycleEnum.LOADING, lifecycle) this._image.setAttribute(’src’, loading || DEFAULT_LOADING) if (!hasIntersectionObserver) { this.loadImages(el, src, error, lifecycle) this._log(() => { throw new Error(’Not support IntersectionObserver!’) }) } this._initIntersectionObserver(el, src, error, lifecycle) } /** * force loading * * @param {HTMLElement} el * @param {string} src * @memberof Lazy */ public loadImages(el: HTMLElement, src: string, error?: string, lifecycle?: Lifecycle): void { this._setImageSrc(el, src, error, lifecycle) } /** * set img tag src * * @private * @param {HTMLElement} el * @param {string} src * @memberof Lazy */ private _setImageSrc(el: HTMLElement, src: string, error?: string, lifecycle?: Lifecycle): void { const srcset = el.getAttribute(’srcset’) if (’img’ === el.tagName.toLowerCase()) { if (src) el.setAttribute(’src’, src) if (srcset) el.setAttribute(’srcset’, srcset) this._listenImageStatus(el as HTMLImageElement, () => { this._log(() => { console.log(’Image loaded successfully!’) }) this._lifecycle(LifecycleEnum.LOADED, lifecycle) }, () => { // Fix onload trigger twice, clear onload event // Reload on update el.onload = null this._lifecycle(LifecycleEnum.ERROR, lifecycle) this._observer.disconnect() if (error) el.setAttribute(’src’, error) this._log(() => { throw new Error(’Image failed to load!’) }) }) } else { el.style.backgroundImage = ’url(’’ + src + ’’)’ } } /** * init IntersectionObserver * * @private * @param {HTMLElement} el * @param {string} src * @memberof Lazy */ private _initIntersectionObserver(el: HTMLElement, src: string, error?: string, lifecycle?: Lifecycle): void { const observerOptions = this.options.observerOptions this._observer = new IntersectionObserver((entries) => { Array.prototype.forEach.call(entries, (entry) => { if (entry.isIntersecting) { this._observer.unobserve(entry.target) this._setImageSrc(el, src, error, lifecycle) } }) }, observerOptions) this._observer.observe(this._image) } /** * only listen to image status * * @private * @param {string} src * @param {(string | null)} cors * @param {() => void} success * @param {() => void} error * @memberof Lazy */ private _listenImageStatus(image: HTMLImageElement, success: ((this: GlobalEventHandlers, ev: Event) => any) | null, error: OnErrorEventHandler) { image.onload = success image.onerror = error } /** * to do it differently for object and string * * @public * @param {(ValueFormatterObject | string)} value * @returns {*} * @memberof Lazy */ public _valueFormatter(value: ValueFormatterObject | string): ValueFormatterObject { let src = value as string let loading = this.options.loading let error = this.options.error let lifecycle = this.options.lifecycle if (isObject(value)) { src = (value as ValueFormatterObject).src loading = (value as ValueFormatterObject).loading || this.options.loading error = (value as ValueFormatterObject).error || this.options.error lifecycle = ((value as ValueFormatterObject).lifecycle || this.options.lifecycle) } return { src, loading, error, lifecycle } } /** * log * * @param {() => void} callback * @memberof Lazy */ public _log(callback: () => void): void { if (!this.options.log) { callback() } } /** * lifecycle easy * * @private * @param {LifecycleEnum} life * @param {Lifecycle} [lifecycle] * @memberof Lazy */ private _lifecycle(life: LifecycleEnum, lifecycle?: Lifecycle): void {switch (life) { case LifecycleEnum.LOADING: this._image.setAttribute(’lazy’, LifecycleEnum.LOADING) if (lifecycle?.loading) { lifecycle.loading() } break case LifecycleEnum.LOADED: this._image.setAttribute(’lazy’, LifecycleEnum.LOADED) if (lifecycle?.loaded) { lifecycle.loaded() } break case LifecycleEnum.ERROR: this._image.setAttribute(’lazy’, LifecycleEnum.ERROR) if (lifecycle?.error) { lifecycle.error() } break default: break } }

編寫 update hook

/** * update * * @param {HTMLElement} el * @memberof Lazy */ public update(el: HTMLElement, binding: DirectiveBinding<string | ValueFormatterObject>): void { this._observer.unobserve(el) const { src, error, lifecycle } = this._valueFormatter(binding.value) this._initIntersectionObserver(el, src, error, lifecycle) }

編寫 unmount hook

/** * unmount * * @param {HTMLElement} el * @memberof Lazy */ public unmount(el: HTMLElement): void { this._observer.unobserve(el) }

在 index.ts 編寫注冊插件需要用到的 install 方法

import Lazy from ’./lazy’import { App } from ’vue’import { LazyOptions } from ’./types’export default { /** * install plugin * * @param {App} Vue * @param {LazyOptions} options */ install (Vue: App, options: LazyOptions): void { const lazy = new Lazy(options) Vue.config.globalProperties.$Lazyload = lazy // 留著備用，為了兼容$Lazyload // 選項api，可以通過this.$Lazyload獲取到Lazy類的實例，組合api我還不知道怎么獲取 // 所以通過 provide 來實現此需求 // 使用方式 const useLazylaod = inject(’Lazyload’) Vue.provide(’Lazyload’, lazy) Vue.directive(’lazy’, { mounted: lazy.mount.bind(lazy), updated: lazy.update.bind(lazy), unmounted: lazy.unmount.bind(lazy) }) }}

使用插件

import { createApp } from ’vue’import App from ’./App.vue’import VueLazyLoad from ’../src/index’const app = createApp(App)app.use(VueLazyLoad, { log: true, lifecycle: { loading: () => { console.log(’loading’) }, error: () => { console.log(’error’) }, loaded: () => { console.log(’loaded’) } }})app.mount(’#app’)

App.vue:

<template> <div /> <img v-lazy='’/example/assets/logo.png’' alt='Vue logo' width='100'> <img v-lazy='{src: errorlazy.src, lifecycle: errorlazy.lifecycle}' alt='Vue logo' width='100'> <button @click='change'> change </button></template><script>import { reactive } from ’vue’export default { name: ’App’, setup() { const errorlazy = reactive({ src: ’/example/assets/log1o.png’, lifecycle: { loading: () => { console.log(’image loading’) }, error: () => { console.log(’image error’) }, loaded: () => { console.log(’image loaded’) } } }) const change = () => { errorlazy.src = ’http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1603764281&t=bedd2d52d62e141cbb08c462183601c7’ } return { errorlazy, change } }}</script><style>.margin { margin-top: 1000px;}.image[lazy=loading] { background: goldenrod;}.image[lazy=error] { background: red;}.image[lazy=loaded] { background: green;}</style>

以上就是vue3+typescript實現圖片懶加載插件的詳細內容，更多關于vue3 圖片懶加載的資料請關注好吧啦網其它相關文章！