A vue3.x image lazyload plugin.
- ⚡ 0 dependencies: No worry about your bundle size
- 🦾 Type Strong: Written in Typescript
- 🌎 Browser support: Use it through CDN
- 😊 Support Hook: useLazyload
$ npm i vue3-lazyload
# or
$ yarn add vue3-lazyloadCDN: https://unpkg.com/vue3-lazyload
<script src="https://unpkg.com/vue3-lazyload"></script>
<script>
Vue.createApp(App).use(VueLazyLoad)
...
</script>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:
<template>
<img v-lazy="your image url" />
</template><template>
<img v-lazy="{ src: 'your image url', loading: 'your loading image url', error: 'your error image url' }">
</template>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.
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const lazyOptions = reactive({
src: 'your image url',
lifecycle: {
loading: (el) => {
console.log('image loading', el)
},
error: (el) => {
console.log('image error', el)
},
loaded: (el) => {
console.log('image loaded', el)
}
}
})
return {
lazyOptions,
}
}
}
</script>
<template>
<img v-lazy="{src: lazyOptions.src, lifecycle: lazyOptions.lifecycle}" width="100">
</template>
<script lang="ts">
import { ref } from 'vue'
import { useLazyload } from 'vue3-lazyload'
export default {
name: 'App',
setup() {
const src = ref('/example/assets/logo.png')
const lazyRef = useLazyload(src, {
lifecycle: {
loading: () => {
console.log('loading')
},
error: () => {
console.log('error')
},
loaded: () => {
console.log('loaded')
}
}
})
return {
lazyRef
}
}
}
</script>
<template>
<img ref="lazyRef" class="image" width="100">
</template>There are three states while image loading.
You can take advantage of this feature, make different css controls for different states.
loadingloadederror
<img src="..." lazy="loading">
<img src="..." lazy="loaded">
<img src="..." lazy="error"><style>
img[lazy=loading] {
/*your style here*/
}
img[lazy=error] {
/*your style here*/
}
img[lazy=loaded] {
/*your style here*/
}
</style>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:
<template>
<img v-lazy="{ src: 'your image url', loading: 'your loading image url', error: 'your error image url', delay: 500 }">
</template>| 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 |
| 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 |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent