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

• Demo

• Requirements

• Installation

• Usage

Constructor Options Implementation

* [___Basic___](#basic)

* [___Css state___](#css-state)

• Methods

Event hook LazyLoadHandler Performance

• Authors && Contributors

• License

Demo

• Vue.js 1.x or 2.x

npm

```bash $ npm i vue-lazyload -S ```

yarn

```bash $ yarn add vue-lazyload ```

CDN

CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js ```html ``` 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

• <img v-lazy="img.src" >

``` 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|

Desired Listen Events

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

Image listener filter

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'

}

}

}

}) ```

Element Adapter

```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')

}

}

}) ```

IntersectionObserver

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

} }) ```

Lazy Component

```javascript Vue.use(VueLazyload, { lazyComponent: true }); ``` ```html ``` Use in list ```html ```

Implementation

Basic

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

CSS state

There are three states while img loading loading loaded error ```html ``` ```html ```

Methods

Event Hook

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') ```

LazyLoadHandler

vm.$Lazyload.lazyLoadHandler Manually trigger lazy loading position calculation

Example

```javascript this.$Lazyload.lazyLoadHandler() ```

Performance

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

Dynamic switching pictures

```vue ```

• hilongjw

• imcvampire

• darrynten

• biluochun

• whwnow

• Leopoldthecoder

• michalbcz

• blue0728

• JounQin

• llissery

• mega667

• RobinCK

• GallenHu

The MIT License