Need help with vue-lazyload?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

hilongjw
7.0K Stars 807 Forks MIT License 320 Commits 169 Opened issues

Description

A Vue.js plugin for lazyload your Image or Component in your application.

Services available

!
?

Need anything else?

Contributors list

Vue-Lazyload

Build Status npm version npm downloads npm license PRs Welcome CDNJS version

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

Demo

Requirements

Installation

npm

$ npm i vue-lazyload -S

yarn

$ yarn add vue-lazyload

CDN

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

Usage

main.js:

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:

use

v-lazy-container
work with raw HTML

custom

error
and
loading
placeholder image

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.

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

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

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.

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

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

Lazy Component

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



Use in list

html

  

Implementation

Basic

vue-lazyload will set this img element's

src
with
imgUrl
string

CSS state

There are three states while img loading

loading
loaded
error




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

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

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

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

this.$Lazyload.lazyLoadHandler()

Performance

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

performance-demo

Dynamic switching pictures

 

Authors && Contributors

License

The MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.