基于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>
三、总结
在项目中大量使用图片时使用图片懒加载会起到很好的优化效果。