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="..." lazy="loading"> <img src="..." lazy="loaded"> <img src="..." 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
: 当前需要加载的图片 urlloading
: 加载状态时所用到的图片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 class="margin" /> <img v-lazy="'/example/assets/logo.png'" alt="Vue logo" width="100"> <img v-lazy="{src: errorlazy.src, lifecycle: errorlazy.lifecycle}" alt="Vue logo" class="image" 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 图片懒加载的资料请关注脚本之家其它相关文章!
相关文章
vue项目实现路由跳转到新页面,返回旧页面,保留之前的数据记录(操作代码)
这篇文章主要介绍了vue项目实现路由跳转到新页面,返回旧页面,保留之前的数据记录,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09vue3+vite使用vite-plugin-svg-icons插件显示本地svg图标的方法
这篇文章主要介绍了vue3+vite使用vite-plugin-svg-icons插件显示本地svg图标的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12新版vue-cli模板下本地开发环境使用node服务器跨域的方法
这篇文章主要介绍了新版vue-cli模板下本地开发环境使用node服务器跨域的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-04-04如何在Vue3和Vite项目中用SQLite数据库进行数据存储
SQLite是一种嵌入式关系型数据库管理系统,是一个零配置、无服务器的、自给自足的、事务性的SQL数据库引擎,这篇文章主要给大家介绍了关于如何在Vue3和Vite项目中用SQLite数据库进行数据存储的相关资料,需要的朋友可以参考下2024-03-03vue在antDesign框架或elementUI框架组件native事件中触发2次问题
这篇文章主要介绍了vue在antDesign框架或elementUI框架组件native事件中触发2次问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04
最新评论