Vue-Lazyload

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

Table of Contents

• Requirements
• Installation
• Usage
• Constructor Options
• Implementation
  • Basic
  • Css state
• Methods
  • Event hook
  • LazyLoadHandler
  • Performance
• Authors && Contributors
• License

Requirements

• Vue.js 3.x

Installation

npm

1
2$ npm i @jambonn/vue-lazyload
3

yarn

1
2$ yarn add @jambonn/vue-lazyload
3

CDN

CDN: https://unpkg.com/@jambonn/vue-lazyload/dist/vue-lazyload.umd.js

1<script src="https://unpkg.com/@jambonn/vue-lazyload/dist/vue-lazyload.umd.js"></script>
2<script>
3  var AttributeBindingApp = {
4    data() {
5      return {
6        message: 'Vue Lazyload'
7      }
8    }
9  }
10  var app = Vue.createApp(AttributeBindingApp)
11  app.use(window['vue-lazyload'].default)
12  app.mount('#bind-attribute')
13  ...
14</script>
15

Usage

main.js:

1
2import { createApp } from 'vue'
3import VueLazyload from '@jambonn/vue-lazyload'
4import App from './App.vue'
5
6const app = createApp(App)
7app.use(VueLazyload)
8
9// or with options
10const loadimage = require('./assets/loading.gif')
11const errorimage = require('./assets/error.gif')
12app.use(VueLazyload, {
13  preLoad: 1.3,
14  error: errorimage,
15  loading: loadimage,
16  attempt: 1
17})
18
19app.mount('#app')

template:

1<ul>
2  <li v-for="img in list">
3    <img v-lazy="img.src" >
4  </li>
5</ul>

use v-lazy-container work with raw HTML

1<div v-lazy-container="{ selector: 'img' }">
2  <img data-src="//domain.com/img1.jpg">
3  <img data-src="//domain.com/img2.jpg">
4  <img data-src="//domain.com/img3.jpg">  
5</div>

custom error and loading placeholder image

1<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
2  <img data-src="//domain.com/img1.jpg">
3  <img data-src="//domain.com/img2.jpg">
4  <img data-src="//domain.com/img3.jpg">  
5</div>

1<div v-lazy-container="{ selector: 'img' }">
2  <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
3  <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
4  <img data-src="//domain.com/img3.jpg">  
5</div>

Constructor Options

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

Desired Listen Events

You can configure which events you want vue-lazyload by passing in an array of listener names.

1const app = createApp(AttributeBindingApp)
2app.use(VueLazyload, {
3  preLoad: 1.3,
4  error: 'dist/error.png',
5  loading: 'dist/loading.gif',
6  attempt: 1,
7  // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
8  listenEvents: [ 'scroll' ]
9})

This is useful if you are having trouble with this plugin resetting itself to loading when you have certain animations and transitions taking place

Image listener filter

dynamically modify the src of image

1const app = createApp(AttributeBindingApp)
2app.use(VueLazyload, {
3    filter: {
4      progressive (listener, options) {
5          const isCDN = /qiniudn.com/
6          if (isCDN.test(listener.src)) {
7              listener.el.setAttribute('lazy-progressive', 'true')
8              listener.loading = listener.src + '?imageView2/1/w/10/h/10'
9          }
10      },
11      webp (listener, options) {
12          if (!options.supportWebp) return
13          const isCDN = /qiniudn.com/
14          if (isCDN.test(listener.src)) {
15              listener.src += '?imageView2/2/format/webp'
16          }
17      }
18    }
19})

Element Adapter

1const app = createApp(AttributeBindingApp)
2app.use(VueLazyload, {
3    adapter: {
4        loaded ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init }) {
5            // do something here
6            // example for call LoadedHandler
7            LoadedHandler(el)
8        },
9        loading (listender, Init) {
10            console.log('loading')
11        },
12        error (listender, Init) {
13            console.log('error')
14        }
15    }
16})

IntersectionObserver

use Intersection Observer to to improve performance of a large number of nodes.

1const app = createApp(AttributeBindingApp)
2app.use(vueLazy, {
3  // set observer to true
4  observer: true,
5
6  // optional
7  observerOptions: {
8    rootMargin: '0px',
9    threshold: 0.1
10  }
11})

Lazy Component

1const app = createApp(AttributeBindingApp)
2app.use(VueLazyload, {
3  lazyComponent: true
4});

1<lazy-component @show="handler">
2  <img class="mini-cover" :src="img.src" width="100%" height="400">
3</lazy-component>
4
5<script>
6  export default {
7    setup () {
8      const handler = () => {
9        console.log('this component is showing')
10      }
11      return { handler }
12    }
13  }
14</script>

Use in list

1<lazy-component v-for="(item, index) in list" :key="item.src" >
2  <img class="mini-cover" :src="item.src" width="100%" height="400">
3</lazy-component>

Implementation

Basic

vue-lazyload will set this img element's src with imgUrl string

1<template>
2  <div">
3     <img v-lazy="imgUrl"/>
4     <div v-lazy:background-image="imgUrl"></div>
5
6     <!-- with customer error and loading -->
7     <img v-lazy="imgObj"/>
8     <div v-lazy:background-image="imgObj"></div>
9
10     <!-- Customer scrollable element -->
11     <img v-lazy.container ="imgUrl"/>
12     <div v-lazy:background-image.container="img"></div>
13
14    <!-- srcset -->
15    <img v-lazy="'img.400px.jpg'" data-srcset="img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w">
16    <img v-lazy="imgUrl" :data-srcset="imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'" />
17  </div>
18</template>
19
20<script>
21  import { ref, reactive } from 'vue'
22  export default {
23    setup () {
24      const imgObj = reactive({
25        src: 'http://xx.com/logo.png',
26        error: 'http://xx.com/error.png',
27        loading: 'http://xx.com/loading-spin.svg'
28      })
29      const imgUrl = ref('http://xx.com/logo.png') // String
30
31      return { imgObj, imgUrl }
32    }
33  }
34</script>

CSS state

There are three states while img loading

loading loaded error

1<img src="imgUrl" lazy="loading">
2<img src="imgUrl" lazy="loaded">
3<img src="imgUrl" lazy="error">

1<style>
2  img[lazy=loading] {
3    /*your style here*/
4  }
5  img[lazy=error] {
6    /*your style here*/
7  }
8  img[lazy=loaded] {
9    /*your style here*/
10  }
11  /*
12  or background-image
13  */
14  .yourclass[lazy=loading] {
15    /*your style here*/
16  }
17  .yourclass[lazy=error] {
18    /*your style here*/
19  }
20  .yourclass[lazy=loaded] {
21    /*your style here*/
22  }
23</style>

Methods

Event Hook

1import { getCurrentInstance, inject } from 'vue'
2export default {
3  setup() {
4    const internalInstance = getCurrentInstance().appContext.config.globalProperties
5    const LazyLoad = internalInstance.$Lazyload
6    // or
7    const Lazyload = inject('Lazyload')
8
9    Lazyload.$on(event, callback)
10    Lazyload.$off(event, callback)
11    Lazyload.$once(event, callback)
12  }
13}

• $on Listen for a custom events loading, loaded, error
• $once Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.
• $off Remove event listener(s).

Lazyload.$on

Arguments:

• {string} event
• {Function} callback

Example

1Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
2  console.log(el, src)
3})

Lazyload.$once

Arguments:

• {string} event
• {Function} callback

Example

1Lazyload.$once('loaded', function ({ el, src }) {
2  console.log(el, src)
3})

Lazyload.$off

If only the event is provided, remove all listeners for that event

Arguments:

• {string} event
• {Function} callback

Example

1import { getCurrentInstance, inject } from 'vue'
2export default {
3  setup() {
4    const internalInstance = getCurrentInstance().appContext.config.globalProperties
5    const LazyLoad = internalInstance.$Lazyload
6    // or
7    const Lazyload = inject('Lazyload')
8
9    const handler = ({ el, src }, formCache) => {
10      console.log(el, src)
11    }
12    Lazyload.$on('loaded', handler)
13    Lazyload.$off('loaded', handler)
14    Lazyload.$off('loaded')
15  }
16}

LazyLoadHandler

Lazyload.lazyLoadHandler

Manually trigger lazy loading position calculation

Example

1import { getCurrentInstance, inject } from 'vue'
2export default {
3  setup() {
4    const internalInstance = getCurrentInstance().appContext.config.globalProperties
5    const LazyLoad = internalInstance.$Lazyload
6    // or
7    const Lazyload = inject('Lazyload')
8
9    Lazyload.lazyLoadHandler()
10  }
11}

Performance

1import { getCurrentInstance, inject } from 'vue'
2export default {
3  setup() {
4    const internalInstance = getCurrentInstance().appContext.config.globalProperties
5    const LazyLoad = internalInstance.$Lazyload
6    // or
7    const Lazyload = inject('Lazyload')
8
9    Lazyload.$on('loaded', function (listener) {
10      console.table(Lazyload.performance())
11    })
12  }
13}

Dynamic switching pictures

1 <img v-lazy="lazyImg" :key="lazyImg.src">

Authors && Contributors

• hilongjw
• imcvampire
• darrynten
• biluochun
• whwnow
• Leopoldthecoder
• michalbcz
• blue0728
• JounQin
• llissery
• mega667
• RobinCK
• GallenHu
• Jambon

License

The MIT License