图片懒加载 在可视区域才加载

npm install vue-lazyload --save-dev //安装懒加载包

入口文件main中引入

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

可配置自定义属性
Vue.use(VueLazyload, {preLoad: 1.3,error: 'dist/error.png',loading: 'dist/loading.gif',attempt: 1})

在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ,从而将图片显示方式更改为懒加载显示:

 

你可能感兴趣的:(图片懒加载 在可视区域才加载)