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")}`, //背景图　　　　　　背景图片中使用　　　　

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

　　　　lazy=error

　　　　lazy=loading

vue-lazyload图片懒加载v-lazy

相关

标签