vue-lazyload-img v2.1.3

中文文档看这里

Update v2.1.0

• Add requestAnimationFrame polyfill.
• Now img lazyload detects horizontal direction automatically
• Imporve perfomence, since the scroll event liseners were as many as pictures * 2 before, there is only two liseners now.

Update v2.1.1

• Add .npmignore to exclude .babelrc

Update in V2.1.2

• Preload, let you set a range to preload images before an image enters the viewport.
• Rewrite with Typescript, add d.ts, make developing easier.

Update in V2.1.3

• fix wrong export of typings

Next

• Support partial-match image URLs, eg. pic.400px.jpg or pic.200px.jpg, let you switch resolution of images by some custom rules.
• Maybe SSR.

English doc

Finally Available on vue2, if you use v1, use npm install vue-lazyload-img@1

vue-lazyload-img

intro

   a plugin of vue for image lazyload, especially optimized for mobile browser

demo

Use mobile mode if possible

var with script tag

bundle with webpack

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 0): average changes of document y-pos and any scroller's x-pos from last 10 frames

time: duration of fade in or fade out

• 300 (default, unit: ms)

preload: set a range(vertical) to preload images before an image enters the viewport.

• 0 (default, unit: px)

Vue.use(Lazyload,{
    // default false, recommand true
    fade: true,
    // it's better not set the speed now (because cellphones perfomance is better)
    // this option make images show slower
    // but if you open it, it does save network traffic data
    // speed: 20,
    // default 300, mostly, it's not necessary to set it
    time: 300,
    // unit:px, default 0, it allows the lazyload manager loads images(vertical) before an image appeard in screen
    preload: 500,
})

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

中文文档看这里

Update v2.1.0

• Add requestAnimationFrame polyfill.
• Now img lazyload detects horizontal direction automatically
• Imporve perfomence, since the scroll event liseners were as many as pictures * 2 before, there is only two liseners now.

Update v2.1.1

• Add .npmignore to exclude .babelrc

Update in V2.1.2

• Preload, let you set a range to preload images before an image enters the viewport.
• Rewrite with Typescript, add d.ts, make developing easier.

Next

• Support partial-match image URLs, eg. pic.400px.jpg or pic.200px.jpg, let you switch resolution of images by some custom rules.
• Maybe SSR.

English doc

Finally Available on vue2, if you use v1, use npm install vue-lazyload-img@1

vue-lazyload-img

intro

   a plugin of vue for image lazyload, especially optimized for mobile browser

demo

Use mobile mode if possible

var with script tag

bundle with webpack

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
• bigger than 0 (defult 0): average changes of document y-pos and any scroller's x-pos from last 10 frames

time: duration of fade in or fade out

• 300 (default, unit: ms)

preload: set a range(vertical) to preload images before an image enters the viewport.

• 0 (default, unit: px)

Vue.use(Lazyload,{
    // default false, recommand true
    fade: true,
    // it's better not set the speed now (because cellphones perfomance is better)
    // this option make images show slower
    // but if you open it, it does save network traffic data
    // speed: 20,
    // default 300, mostly, it's not necessary to set it
    time: 300,
    // unit:px, default 0, it allows the lazyload manager loads images(vertical) before an image appeard in screen
    preload: 500,
})

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