这个插件未压缩版本只有7.62kb,很精简,支持img标签和background-img资源的lazyload。支持vue.js 1.0 和vue.js 2.0
安转
使用方法
import Vue from 'vue'
// import VueLazyload
import VueLazyload from 'vue-lazyload'
// import VueLazyload
import VueLazyload from 'vue-lazyload'
//use custom directive
Vue.use(VueLazyload)
// use options
Vue.use(VueLazyload,{
preLoad: 1.3,error: 'dist/error.png',loading: 'dist/loading.gif',attempt: 1
})
new Vue({
el: 'body',})
这里可以定制所有加载中和加载失败加载成功的样式,
img[lazy=loading] {
/*your style here*/
}
img[lazy=error] {
/*your style here*/
},img[lazy=loaded] {
/*your style here*/
}
/*
or background-image
*/
.yourclass[lazy=loading] {
/*your style here*/
}
.yourclass[lazy=error] {
/*your style here*/
},.yourclass[lazy=loaded] {
/*your style here*/
}
API
Options
type | detail |
---|---|