超智能vue图片懒加载之指令化管理（vue-img-lazy-l

分享一个基于vue的图片懒加载的指令插件，使用起来也是极其简易。
图片的懒加载，可以减少首页首次加载的数量，减少服务器的压力，优化用户体验，有点就不多提了，所以在app里使用图片懒加载是很必要的。

安装/Install

npm install vue-images-lazy-load --save

使用

main.js

import VueImgLazyLoad from 'vue-images-lazy-load';
Vue.use(VueImgLazyLoader);

最开始的名字有冲突，所以使用了vue-images-lazy-load

*.vue

使用默认配置

<img :src="baseUrl" v-img-lazy-load />

参数配置

• url:替换插件默认的展位图，格式请用base64格式，或者提起解析好的(require,import)，或者cdn地址

<img :src="baseUrl" v-img-lazy-load="{url: ''}" />

• oberserOptions: 观察者参数配置。
  root: 元素相对于哪个父节点可见,默认为整个视窗。
  rootMargin：可以区域范围，比如："0px 0px 10px 0px",则为元素离root底部10px被视为可见。
  threshold(0-1)： 元素达到root的百分比被视为可见。

<img :src="baseUrl" v-img-lazy-load="{
    oberserOptions: {
        root: null,
            rootMargin: '0px',
            threshold: 0
    }}"
 />

没有太多复杂的参数配置，使用起来非常简单轻便。如果觉得有点用的同学欢迎start，有什么问题也欢迎讨论，项目基于typescript，欢迎同学们查看。

项目地址：https://github.com/Vitaminaq/vue-img-lazy-load

使用的项目地址：https://github.com/Vitaminaq/cfsw-vue-cli3.0(项目基于typescript，欢迎start)