在vue中使用图片懒加载详细指南
说明
当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点。
使用方式
使用vue的 vue-lazyload 插件 插件地址
1.Installation 安装方式
npm install vue-lazyload -d
2.用法
在main.js 入口文件
import VueLazyLoad from 'vue-lazyload'//导入
Vue.use(VueLazyLoad, {
preLoad: 1,
loading: require('assets/img/common/placeholder.png')//使用,地址图片为预加载图片
})
在入口文件添加后,在组件任何地方都可以直接使用把 img 里的:src ->
**v-lazy=""**如:
<img v-lazy="getImg" :key="getImg" alt="">