a plugin of vue for image lazyload, especially optimized for mobile browser
Use mobile mode if possible
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 20): average changes of document y-pos and any scroller's x-pos from last 10 frames, awesome in mobile browsers
- 300 (default, unit: ms)
Vue.use(Lazyload,{
fade: true,
speed: 20,
time: 300
})
- 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
- to support the API in v1 but not in v2 now
- make a UI component system with future libs
vue图片懒加载插件,特别为移动端优化
适配vue2的更新
作为vue-ui-kit体系的可搭配套件使用, on roadmap
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)
由于源码使用了部分es6特性需要使用类似babel
的工具进行编译
由于使用了umd规范,所以可以用<script>标签引入,或使用其他的JS模块加载器,比如require.js
引用dist/vue.lazyimg.min.js
或dist/vue.lazyimg.js
即可
- 目前v2不支持可扩展的
directive
- 目前不支持横向检测(nohori暂时失效)
上述问题后续版本会解决
require("vue-lazyload-img")
改为var Lazyload = require("vue-lazyload-img")
Vue.use(Vue.lazyimg)
改为Vue.use(Lazyload)
- 覆盖v1中的功能
- 后续会继续放出如scroller、swiper等工具,形成体系套件