中文文档看这里

• 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.

• Add .npmignore to exclude .babelrc

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

• fix wrong export of typings

• 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.

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

Use mobile mode if possible

var with script tag

bundle with webpack

Vue.use(Lazyload[,options])

global options

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

• 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

• 300 (default, unit: ms)

• 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,
})

• v-lazyload="src"

npm install vue-lazyload-img

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

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

中文文档看这里

• 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.

• Add .npmignore to exclude .babelrc

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

• 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.

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

Use mobile mode if possible

var with script tag

bundle with webpack

Vue.use(Lazyload[,options])

global options

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

• 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

• 300 (default, unit: ms)

• 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,
})

• v-lazyload="src"

npm install vue-lazyload-img

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

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