vue图片懒加载lazy-load

  • 第一步安装
npm i vue-lazyload -D
  • 第二步引入
import VueLazyload from 'vue-lazyload'
  • 第三步简单配置参数(两种图片路径方法)
//最外层static目录下的图片引用
Vue.use(VueLazyload,{
	error:'/static/images/logo.png',//图片加载失败时候显示的图片
	loading:'/static/images/loading.gif'//图片还未加载完成时候的loading图片
})
//src下的assets目录下的图片
Vue.use(VueLazyload,{
	error:require('./assets/images/logo.png'),
	loading:require('./assets/images/loading.gif')
})

因为src中的文件会被webpack编译,assets文件夹中的图片地址,会在编译过程中重命名。vue-lazyload是在main.js文件中引入,不会被webpack进行编译,因此vue-lazyload无法获得正确的图片地址,所以直接写相对地址就无法获取到图片正确地址

  • 第四步写loading图片的样式(具体怎么写样式根据情况来,也可以不写)
img[lazy="loading"]{
  display:block;
  width:50px !important;
  height:50px !important;
  margin:0 auto;
  }
  • 第五步使用
:src--->v-lazy
把img
改成img

效果加载中
vue图片懒加载lazy-load_第1张图片
加载完成
vue图片懒加载lazy-load_第2张图片
友情提示(谷歌模拟网速慢的时候看loading效果F12—Network—Slow 3G)
vue图片懒加载lazy-load_第3张图片

更多参数
vue图片懒加载lazy-load_第4张图片

详情请看lazy-load官网:https://www.npmjs.com/package/vue-lazyload

你可能感兴趣的:(vue)