分享一个基于vue的图片懒加载的指令插件,使用起来也是极其简易。
图片的懒加载,可以减少首页首次加载的数量,减少服务器的压力,优化用户体验,有点就不多提了,所以在app里使用图片懒加载是很必要的。
安装
npm install vue-images-lazy-load --save
使用(最开始的名字有冲突,所以使用了vue-images-lazy-load )
- 全局注册(main.js)
import VueImgLazyLoad from 'vue-images-lazy-load';
// default
Vue.use(VueImgLazyLoader);
// options
Vue.use(VueImgLazyLoader, {
observerOptions: {
rootMargin: '0px 0px -400px 0px',
threshold: 0.5
},
delayTime: 1000
});
oberserOptions: 观察者参数配置。
rootMargin:可以区域范围,比如:"0px 0px -100px 0px",则为元素超出视窗底部100px被视为可见;默认'0px'
threshold(0-1): 元素达到视窗设置的rootMargin,还要加上自身的百分比被视为可见;默认0
delayTime :给图片添加延时加载的时间,默认: (500 + Math.random() * 500)
- 局部注册(*.vue)
import { directive } from 'vue-images-lazy-load';
directives: {
'img-lazy-load': directive
}
- *.vue
使用默认配置
<img :src="baseUrl" v-img-lazy-load />
参数配置
url:替换插件默认的展位图,格式请用base64格式,或者提起解析好的(require,import),或者cdn地址
<img :src="baseUrl" v-img-lazy-load="{url: ''}" />
没有太多复杂的参数配置,使用起来非常简单轻便。如果觉得有点用的同学欢迎start,有什么问题也欢迎讨论,项目基于typescript,欢迎同学们查看。
项目地址:https://github.com/Vitaminaq/vue-img-lazy-load
使用的项目地址:https://github.com/Vitaminaq/cfsw-vue-cli3.0(项目基于typescript,欢迎start)