Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
zhaoye-ds1
committed
May 4, 2018
1 parent
0851917
commit 2355bc8
Showing
3 changed files
with
172 additions
and
168 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,123 +1,127 @@ | ||
| [中文文档看这里](./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 | ||
| * >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` | ||
|
|
||
|
|
||
|
|
||
| [中文文档看这里](./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 `<script>` or with JS module loader like `require.js`. | ||
|
|
||
| the released bundle is in: | ||
|
|
||
| `dist/vue.lazyimg.min.js` | ||
| `dist/vue.lazyimg.js` | ||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,44 @@ | ||
| { | ||
| "author": "jalbaa", | ||
| "description": "A plugin of vue for image lazyload, especially optimized for mobile browser（vue图片懒加载插件，特别为移动端优化）", | ||
| "devDependencies": { | ||
| "babel-core": "^6.24.1", | ||
| "babel-loader": "^6.4.1", | ||
| "babel-preset-es2015": "^6.24.1", | ||
| "babel-preset-flow": "^6.23.0", | ||
| "chai": "^3.5.0", | ||
| "mocha": "^3.2.0", | ||
| "sinon": "^4.5.0", | ||
| "ts-loader": "^3.5.0", | ||
| "typescript": "^2.8.3", | ||
| "vue": "^2.1.4", | ||
| "webpack": "^3.11.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "vue": "^2.0.0" | ||
| }, | ||
| "license": "MIT", | ||
| "main": "dist/vue.lazyimg.js", | ||
| "name": "vue-lazyload-img", | ||
| "optionalDependencies": {}, | ||
| "readme": "README.md", | ||
| "scripts": { | ||
| "build": "webpack", | ||
| "dev": "webpack --watch --config webpack.config.dev.js", | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/JALBAA/vue-lazyload-img.git" | ||
| }, | ||
| "keywords": [ | ||
| "vue", | ||
| "lazyload" | ||
| ], | ||
| "bugs": { | ||
| "url": "https://github.com/JALBAA/vue-lazyload-img/issues" | ||
| }, | ||
| "homepage": "https://github.com/JALBAA/vue-lazyload-img#readme", | ||
| "version": "2.1.2", | ||
| "typings": "types/index.d.ts" | ||
| } | ||
| { | ||
| "author": "jalbaa", | ||
| "description": "A plugin of vue for image lazyload, especially optimized for mobile browser（vue图片懒加载插件，特别为移动端优化）", | ||
| "devDependencies": { | ||
| "babel-core": "^6.24.1", | ||
| "babel-loader": "^6.4.1", | ||
| "babel-preset-es2015": "^6.24.1", | ||
| "babel-preset-flow": "^6.23.0", | ||
| "chai": "^3.5.0", | ||
| "mocha": "^3.2.0", | ||
| "sinon": "^4.5.0", | ||
| "ts-loader": "^3.5.0", | ||
| "typescript": "^2.8.3", | ||
| "vue": "^2.1.4", | ||
| "webpack": "^3.11.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "vue": "^2.0.0" | ||
| }, | ||
| "license": "MIT", | ||
| "main": "dist/vue.lazyimg.js", | ||
| "name": "vue-lazyload-img", | ||
| "optionalDependencies": {}, | ||
| "readme": "README.md", | ||
| "scripts": { | ||
| "build": "webpack", | ||
| "dev": "webpack --watch --config webpack.config.dev.js", | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/JALBAA/vue-lazyload-img.git" | ||
| }, | ||
| "keywords": [ | ||
| "vue", | ||
| "lazyload" | ||
| ], | ||
| "bugs": { | ||
| "url": "https://github.com/JALBAA/vue-lazyload-img/issues" | ||
| }, | ||
| "homepage": "https://github.com/JALBAA/vue-lazyload-img#readme", | ||
| "version": "2.1.3", | ||
| "typings": "types/index.d.ts" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,2 @@ | ||
| import Lazyload from '../src' | ||
| import Lazyload from '../src/lib/index' | ||
| export default Lazyload |