A plugin of vue for image lazy

中文文档看这里

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