A plugin of vue for image lazyload especially optimized for mobile

by Vue.js Examples

vue-lazyload-img

A plugin of vue for image lazyload, especially optimized for mobile browser.

View demo Download Source

API

init

Vue.use(Lazyload[,options])

options

global options

fade: all images will use fadein fx

  • true: all images will fadein if lazyload Complete
  • false (default): no fadein fx of all

speed: threshold of loading lazyload iamge

  • 0 : load lazy-image when the image is visible at the 1st time

  • 0 (defult 20): average changes of document y-pos and any scroller's x-pos from last 10 frames, awesome in mobile browsers

time: duration of fade in or fade out

  • 300 (default, unit: ms)
Vue.use(Lazyload,{
    fade: true,
    speed: 20,
    time: 300
})

directive

v-lazyload

  • v-lazyload="src"

How to import?

In CommonJs

1st

npm install vue-lazyload-img

2nd

es6

import Lazyload from "vue-lazyload-img"
Vue.use(Lazyload)

es5

var Lazyload = require("vue-lazyload-img")
Vue.use(Lazyload)

in this way, you'll need babel or something like it

In browser

because this plugins supports umd, so you can use it as a <script> or with JS module loader like require.js.

the released bundle is in:

dist/vue.lazyimg.min.js
dist/vue.lazyimg.js

roadmap

  • to support the API in v1 but not in v2 now
  • make a UI component system with future libs

GitHub