基于vue优化之图片懒加载

基于vue优化之图片懒加载

首先下载npm install vue-lazyload --save

一、在main.js中引入使用

// 图片懒加载
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
 loading: require('@/assets/empty_chanping.png'),//加载中图片，一定要有，不然会一直重复加载占位图
 error: require('@/assets/empty_chanping.png') //加载失败图片
});

二、使用

//imgUrl 图片路径
<template>
	<img v-lazy="imgUrl" >
 </template> 

三、总结

在项目中大量使用图片时使用图片懒加载会起到很好的优化效果。