Vue module for lazyloading images in your Vue 3 applications. This module is base on vue-lazyload. Vue 1.x or 2.x please use vue-lazyload. Some of goals of this project worth noting include:
- Be lightweight, powerful and easy to use
- Work on any image type
- Add loading class while image is loading
- Supports Vue 3
- Requirements
- Installation
- Usage
- Constructor Options
- Implementation
- Methods
- Authors && Contributors
- License
- Vue.js
3.x
$ npm i @jambonn/vue-lazyload
$ yarn add @jambonn/vue-lazyload
CDN: https://unpkg.com/@jambonn/vue-lazyload/dist/vue-lazyload.umd.js
<script src="https://unpkg.com/@jambonn/vue-lazyload/dist/vue-lazyload.umd.js"></script>
<script>
var AttributeBindingApp = {
data() {
return {
message: 'Vue Lazyload'
}
}
}
var app = Vue.createApp(AttributeBindingApp)
app.use(window['vue-lazyload'].default)
app.mount('#bind-attribute')
...
</script>main.js:
import { createApp } from 'vue'
import VueLazyload from '@jambonn/vue-lazyload'
import App from './App.vue'
const app = createApp(App)
app.use(VueLazyload)
// or with options
const loadimage = require('./assets/loading.gif')
const errorimage = require('./assets/error.gif')
app.use(VueLazyload, {
preLoad: 1.3,
error: errorimage,
loading: loadimage,
attempt: 1
})
app.mount('#app')template:
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>use v-lazy-container work with raw HTML
<div v-lazy-container="{ selector: 'img' }">
<img data-src="//domain.com/img1.jpg">
<img data-src="//domain.com/img2.jpg">
<img data-src="//domain.com/img3.jpg">
</div>custom error and loading placeholder image
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
<img data-src="//domain.com/img1.jpg">
<img data-src="//domain.com/img2.jpg">
<img data-src="//domain.com/img3.jpg">
</div><div v-lazy-container="{ selector: 'img' }">
<img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
<img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
<img data-src="//domain.com/img3.jpg">
</div>| key | description | default | options |
|---|---|---|---|
preLoad |
proportion of pre-loading height | 1.3 |
Number |
error |
src of the image upon load fail | 'data-src' |
String |
loading |
src of the image while loading | 'data-src' |
String |
attempt |
attempts count | 3 |
Number |
listenEvents |
events that you want vue listen for | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] |
Desired Listen Events |
adapter |
dynamically modify the attribute of element | { } |
Element Adapter |
filter |
the image's listener filter | { } |
Image listener filter |
lazyComponent |
lazyload component | false |
Lazy Component |
dispatchEvent |
trigger the dom event | false |
Boolean |
throttleWait |
throttle wait | 200 |
Number |
observer |
use IntersectionObserver | false |
Boolean |
observerOptions |
IntersectionObserver options | { rootMargin: '0px', threshold: 0.1 } | IntersectionObserver |
silent |
do not print debug info | true |
Boolean |
You can configure which events you want vue-lazyload by passing in an array of listener names.
const app = createApp(AttributeBindingApp)
app.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1,
// the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
listenEvents: [ 'scroll' ]
})This is useful if you are having trouble with this plugin resetting itself to loading when you have certain animations and transitions taking place
dynamically modify the src of image
const app = createApp(AttributeBindingApp)
app.use(VueLazyload, {
filter: {
progressive (listener, options) {
const isCDN = /qiniudn.com/
if (isCDN.test(listener.src)) {
listener.el.setAttribute('lazy-progressive', 'true')
listener.loading = listener.src '?imageView2/1/w/10/h/10'
}
},
webp (listener, options) {
if (!options.supportWebp) return
const isCDN = /qiniudn.com/
if (isCDN.test(listener.src)) {
listener.src = '?imageView2/2/format/webp'
}
}
}
})const app = createApp(AttributeBindingApp)
app.use(VueLazyload, {
adapter: {
loaded ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init }) {
// do something here
// example for call LoadedHandler
LoadedHandler(el)
},
loading (listender, Init) {
console.log('loading')
},
error (listender, Init) {
console.log('error')
}
}
})use Intersection Observer to to improve performance of a large number of nodes.
const app = createApp(AttributeBindingApp)
app.use(vueLazy, {
// set observer to true
observer: true,
// optional
observerOptions: {
rootMargin: '0px',
threshold: 0.1
}
})const app = createApp(AttributeBindingApp)
app.use(VueLazyload, {
lazyComponent: true
});<lazy-component @show="handler">
<img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>
<script>
export default {
setup () {
const handler = () => {
console.log('this component is showing')
}
return { handler }
}
}
</script>Use in list
<lazy-component v-for="(item, index) in list" :key="item.src" >
<img class="mini-cover" :src="item.src" width="100%" height="400">
</lazy-component>vue-lazyload will set this img element's src with imgUrl string
<template>
<div">
<img v-lazy="imgUrl"/>
<div v-lazy:background-image="imgUrl"></div>
<!-- with customer error and loading -->
<img v-lazy="imgObj"/>
<div v-lazy:background-image="imgObj"></div>
<!-- Customer scrollable element -->
<img v-lazy.container ="imgUrl"/>
<div v-lazy:background-image.container="img"></div>
<!-- srcset -->
<img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w">
<img v-lazy="imgUrl" :data-srcset="imgUrl' '?size=400 400w, ' imgUrl ' ?size=800 800w, ' imgUrl '/1200.jpg 1200w'" />
</div>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
setup () {
const imgObj = reactive({
src: 'http://xx.com/logo.png',
error: 'http://xx.com/error.png',
loading: 'http://xx.com/loading-spin.svg'
})
const imgUrl = ref('http://xx.com/logo.png') // String
return { imgObj, imgUrl }
}
}
</script>There are three states while img loading
loading loaded error
<img src="imgUrl" lazy="loading">
<img src="imgUrl" lazy="loaded">
<img src="imgUrl" lazy="error"><style>
img[lazy=loading] {
/*your style here*/
}
img[lazy=error] {
/*your style here*/
}
img[lazy=loaded] {
/*your style here*/
}
/*
or background-image
*/
.yourclass[lazy=loading] {
/*your style here*/
}
.yourclass[lazy=error] {
/*your style here*/
}
.yourclass[lazy=loaded] {
/*your style here*/
}
</style>import { getCurrentInstance, inject } from 'vue'
export default {
setup() {
const internalInstance = getCurrentInstance().appContext.config.globalProperties
const LazyLoad = internalInstance.$Lazyload
// or
const Lazyload = inject('Lazyload')
Lazyload.$on(event, callback)
Lazyload.$off(event, callback)
Lazyload.$once(event, callback)
}
}$onListen for a custom eventsloading,loaded,error$onceListen for a custom event, but only once. The listener will be removed once it triggers for the first time.$offRemove event listener(s).
{string} event{Function} callback
Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
console.log(el, src)
}){string} event{Function} callback
Lazyload.$once('loaded', function ({ el, src }) {
console.log(el, src)
})If only the event is provided, remove all listeners for that event
{string} event{Function} callback
import { getCurrentInstance, inject } from 'vue'
export default {
setup() {
const internalInstance = getCurrentInstance().appContext.config.globalProperties
const LazyLoad = internalInstance.$Lazyload
// or
const Lazyload = inject('Lazyload')
const handler = ({ el, src }, formCache) => {
console.log(el, src)
}
Lazyload.$on('loaded', handler)
Lazyload.$off('loaded', handler)
Lazyload.$off('loaded')
}
}Lazyload.lazyLoadHandler
Manually trigger lazy loading position calculation
import { getCurrentInstance, inject } from 'vue'
export default {
setup() {
const internalInstance = getCurrentInstance().appContext.config.globalProperties
const LazyLoad = internalInstance.$Lazyload
// or
const Lazyload = inject('Lazyload')
Lazyload.lazyLoadHandler()
}
}import { getCurrentInstance, inject } from 'vue'
export default {
setup() {
const internalInstance = getCurrentInstance().appContext.config.globalProperties
const LazyLoad = internalInstance.$Lazyload
// or
const Lazyload = inject('Lazyload')
Lazyload.$on('loaded', function (listener) {
console.table(Lazyload.performance())
})
}
}
<img v-lazy="lazyImg" :key="lazyImg.src">