A Vue3.x image lazyload plugin
npm install vue-next-lazyloadsh
$ 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
![]()
``| 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 |
| key | description |
| ------- | ---------------- |
| loading | Image loading |
| loaded | Image loaded |
| error | Image load error |