vue lazyLoad懒加载插件使用

1.安装插件

npm install vue-lazyload -D

2.在main.js中引入并实例化配置

//实例化
Vue.use(VueLazyLoad,{
  error:'./static/error.png',//获取错误时显示的图片
  loading:require('@/assets/loading.gif') //图片加载中显示的图片
})

如果不需要配置的话忽略上面代码,直接实例化

Vue.use(VueLazyLoad))

参数

1.jpg

3.img的src改为v-lazy

<img v-lazy="imgSrc">

4.设置样式

• tips:加载时可以不设置图片,使用背景颜色代替

  //加载中的样式
  img[lazy=loading] {

  }
//加载错误时的样式
  img[lazy=error] {

  }
//加载后的样式
  img[lazy=loaded] {

  }

• 例子

img[lazy=loading]{
  transform:scaleX(0.3) scaleY(0.5);
}
img[lazy=loaded]{
  animation:appear 0.3s;
  animation-fill-mode: both;
}
@keyframes appear {
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}