Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wormsan/vue-lazyload-img
A plugin of vue for image lazyload（vue图片懒加载插件）
https://github.com/wormsan/vue-lazyload-img
image-lazyload lazyload vue vue-lazyload
Last synced: 3 months ago
JSON representation
A plugin of vue for image lazyload（vue图片懒加载插件）
- Host: GitHub
- URL: https://github.com/wormsan/vue-lazyload-img
- Owner: wormsan
- License: mit
- Created: 2016-04-13T17:02:53.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-04T11:45:54.000Z (over 6 years ago)
- Last Synced: 2024-04-14T21:08:36.955Z (9 months ago)
- Topics: image-lazyload, lazyload, vue, vue-lazyload
- Language: JavaScript
- Homepage: http://docs.gomeminus.com/vue-lazyload-img/test/bundle.html
- Size: 4.61 MB
- Stars: 250
- Watchers: 11
- Forks: 52
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - vue-lazyload-img ★6
- awesome-vue - vue-lazyload-img - lazyload-img?style=social) - 移动优化的vue图片懒加载插件 (UI组件)
- awesome-github-vue - vue-lazyload-img - 移动优化的vue图片懒加载插件 (UI组件)
- awesome-github-vue - vue-lazyload-img - 移动优化的vue图片懒加载插件 (UI组件)
- awesome - vue-lazyload-img - 移动优化的vue图片懒加载插件 (UI组件)
README
[中文文档看这里](./README.zh-CN.md)
## 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](http://docs.gomeminus.com/vue-lazyload-img/test/var.html)
[bundle with webpack](http://docs.gomeminus.com/vue-lazyload-img/test/bundle.html)
## 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
``` shell
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 `` or with JS module loader like `require.js`.
the released bundle is in:
`dist/vue.lazyimg.min.js`
`dist/vue.lazyimg.js`
[中文文档看这里](./README.zh-CN.md)
## 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](http://docs.gomeminus.com/vue-lazyload-img/test/var.html)
[bundle with webpack](http://docs.gomeminus.com/vue-lazyload-img/test/bundle.html)
## 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
``` shell
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`