Vue-Lazyload


Vue module for lazyloading images in your applications. 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 both of Vue 1.0 and Vue 2.0

Table of Contents

* ___Demo___
* ___Requirements___
* ___Installation___
* ___Usage___
* ___Constructor Options___
* ___Implementation___
* ___Basic___
* ___Css state___
* ___Methods___
* __Event hook__
* __LazyLoadHandler__
* __Performance__
* ___Authors && Contributors___
* ___License___

Demo

___Demo___

Requirements

- Vue.js 1.x or 2.x

Installation

npm

``bash

$ npm i vue-lazyload -S

`

yarn

`bash

$ yarn add vue-lazyload

`

CDN

CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js

`html



`

Usage

main.js:

`javascript

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

// or with options
const loadimage = require('./assets/loading.gif')
const errorimage = require('./assets/error.gif')

Vue.use(VueLazyload, {
preLoad: 1.3,
error: errorimage,
loading: loadimage,
attempt: 1
})

new Vue({
el: 'body',
components: {
App
}
})
`

template:

`html

• 
  
  

`

use v-lazy-container work with raw HTML

`html

`

custom error and loading placeholder image

`html

`

`html

`

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|

$3

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

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

$3

dynamically modify the src of image

`javascript
Vue.use(vueLazy, {
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'
}
}
}
})
`

$3

`javascript
Vue.use(vueLazy, {
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')
}
}
})
`

$3

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

`javascript
Vue.use(vueLazy, {
// set observer to true
observer: true,

// optional
observerOptions: {
rootMargin: '0px',
threshold: 0.1
}
})
`

$3

`javascript
Vue.use(VueLazyload, {
lazyComponent: true
});
`

`html





`
Use in list
`html



`

Implementation

$3

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

`html



`

$3

There are three states while img loading

loading loaded error

`html



`

`html

`

Methods

$3

vm.$Lazyload.$on(event, callback)
vm.$Lazyload.$off(event, callback)
vm.$Lazyload.$once(event, callback)

- $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).

#### vm.$Lazyload.$on

#### Arguments:

* {string} event
* {Function} callback

#### Example

`javascript
vm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {
console.log(el, src)
})
`

#### vm.$Lazyload.$once

#### Arguments:

* {string} event
* {Function} callback

#### Example

`javascript
vm.$Lazyload.$once('loaded', function ({ el, src }) {
console.log(el, src)
})
`

#### vm.$Lazyload.$off

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

#### Arguments:

* {string} event
* {Function} callback

#### Example

`javascript
function handler ({ el, src }, formCache) {
console.log(el, src)
}
vm.$Lazyload.$on('loaded', handler)
vm.$Lazyload.$off('loaded', handler)
vm.$Lazyload.$off('loaded')
`

$3

vm.$Lazyload.lazyLoadHandler

Manually trigger lazy loading position calculation

#### Example

`javascript

this.$Lazyload.lazyLoadHandler()

`

$3

`javascript
this.$Lazyload.$on('loaded', function (listener) {
console.table(this.$Lazyload.performance())
})
`

!performance-demo

$3

`vue

``

Authors && Contributors

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

License

The MIT License