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

``sh
$ npm i vue3-lazyload

or

$ yarn add vue3-lazyload
`

🌎 CDN

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


`

👽 Usage

main.js:

`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:
`html

`

$3

`vue

`

$3

In main.js

`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.

`vue


`

$3


`vue


`

#### 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

`html



`
`css

`

$3

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:

`vue

``

📁 Options

| key | description | default | type |
| --------------- | ----------------------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| loading | The image used when the image is loaded | - | string |
| error | The image used when the image failed to load | - | string |
| observerOptions | IntersectionObserver options | { rootMargin: '0px', threshold: 0.1 } | IntersectionObserverInit) |
| log | Do print debug info | true | boolean |
| logLevel | Log level | error | 'error' \| 'warn' \| 'info' \| 'debug' \| 'log' |
| lifecycle | Specify state execution function | - | Lifecycle |
| delay | Time in milliseconds an image has to stay visible before loading starts | 0 | number |

⛱ Lifecycle Hooks

| key | description |
| ------- | ---------------- |
| loading | Image loading |
| loaded | Image loaded |
| error | Image load error |

Contributors

!Contributors