vue-lazyload图片懒加载v-lazy

插件地址：https://github.com/hilongjw/vue-lazyload

 

1.安装插件：
npm i vue-lazyload -S

2.使用：

　　①导入插件
　　　　import VueLazyload from 'vue-lazyload'

　　②注册　 图片懒加载配置

　　在main.js文件中注册插件

 

　　　　

Vue.use(VueLazyLoad,{
    error:'./static/error.png', // 图片路径错误时加载图片
    loading:'./static/loading.png'
})

 

Vue.use(VueLazyload, {
    preLoad: 1.3, // 预加载高度比例  默认值
    attempt：3, // 尝试加载图片数量， 
    loading: `${process.env.BASE_URL}image/loading/image-loading.svg`, // 预加载图片一定要有，不然会一直重复加载占位图

 listenEvents: ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'], // })

 

 

　　③当需要动态切换图片DOM绑定的图片不会变时，需要绑定一个key，就可以了

　　　　:key也可以防止刷新页面或图片更改时图片不更新

　　　　img图片中使用　　
　　　data中   loginBgData: `${require("@assets/image/login/loginbg.png")}`, //背景图

　　<img v-lazy="loginBgData" :key="loginBgData" alt="login..." class="page-login--bg" />

 

　　　　背景图片中使用

　　　　

<div style="width: 100px; height: 100px;" v-lazy:background-image="{src:url}"></div>

　　④v-lazy有三种状态
　　　　lazy=loaded

　　　　lazy=error

　　　　lazy=loading