GitHub - murongg/vue3-lazyload: A Vue3.x image lazyload plugin (original) (raw)

vue3-lazyload

A vue3.x image lazyload plugin.

🚀 Features

• ⚡ 0 dependencies: No worry about your bundle size
• 🦾 Type Strong: Written in Typescript
• 🌎 Browser support: Use it through CDN
• 😊 Support Hook: useLazyload

📎 Installation

$ npm i vue3-lazyload

or

$ yarn add vue3-lazyload

🌎 CDN

CDN: https://unpkg.com/vue3-lazyload

👽 Usage

main.js:

import { createApp } from 'vue' import VueLazyLoad from 'vue3-lazyload' import App from './App.vue'

const app = createApp(App) app.use(VueLazyLoad, { // options... }) app.mount('#app')

App.vue:

v-lazy use object params

Use lifecycle

In main.js

import { createApp } from 'vue' import VueLazyLoad from 'vue3-lazyload' import App from './App.vue'

const app = createApp(App) app.use(VueLazyLoad, { loading: '', error: '', lifecycle: { loading: (el) => { console.log('loading', el) }, error: (el) => { console.log('error', el) }, loaded: (el) => { console.log('loaded', el) } } }) app.mount('#app')

or

In xxx.vue

Have to be aware of is v-lazy don't use v-lazy="lazyOptions", in this case, vue cannot monitor data changes.

Use Hook

Use css state

There are three states while image loading.
You can take advantage of this feature, make different css controls for different states.

• loading
• loaded
• error

Delay loading of images

To avoid loading images that are only shortly visible (e. g. fast scrolling through list of images), a delay in milliseconds can be configured. If a delay is set, an image is only loaded if it stays visible for the specified amount of time.

Set delay in object parameter:

📁 Options

⛱ Lifecycle Hooks

Contributors