项目作者: wormsan

项目描述 :
A plugin of vue for image lazyload(vue图片懒加载插件)
高级语言: JavaScript
项目地址: git://github.com/wormsan/vue-lazyload-img.git
创建时间: 2016-04-13T17:02:53Z
项目社区:https://github.com/wormsan/vue-lazyload-img

开源协议:MIT License

下载


中文文档看这里

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

  1. 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)
  1. Vue.use(Lazyload,{
  2. // default false, recommand true
  3. fade: true,
  4. // it's better not set the speed now (because cellphones perfomance is better)
  5. // this option make images show slower
  6. // but if you open it, it does save network traffic data
  7. // speed: 20,
  8. // default 300, mostly, it's not necessary to set it
  9. time: 300,
  10. // unit:px, default 0, it allows the lazyload manager loads images(vertical) before an image appeard in screen
  11. preload: 500,
  12. })

directive

v-lazyload

  • v-lazyload=”src”

How to import?

In CommonJs

1st

  1. npm install vue-lazyload-img

2nd

es6

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

es5

  1. var Lazyload = require("vue-lazyload-img")
  2. 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

  1. 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)
  1. Vue.use(Lazyload,{
  2. // default false, recommand true
  3. fade: true,
  4. // it's better not set the speed now (because cellphones perfomance is better)
  5. // this option make images show slower
  6. // but if you open it, it does save network traffic data
  7. // speed: 20,
  8. // default 300, mostly, it's not necessary to set it
  9. time: 300,
  10. // unit:px, default 0, it allows the lazyload manager loads images(vertical) before an image appeard in screen
  11. preload: 500,
  12. })

directive

v-lazyload

  • v-lazyload=”src”

How to import?

In CommonJs

1st

  1. npm install vue-lazyload-img

2nd

es6

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

es5

  1. var Lazyload = require("vue-lazyload-img")
  2. 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