1、安装插件

npm install vue-lazyload --save

2、在main.js文件中注册插件

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
     loading: require('img/loading.png'),//加载中图片，一定要有，不然会一直重复加载占位图
     error: require('img/error.png')  //加载失败图片
});

配置参数：

3、v-lazy有三种状态

lazy=loaded

lazy=error

lazy=loading

4、在图片中使用

img：
<img v-lazy="img_url" :key='img_url'> //将 :src 属性直接改为v-lazy, :key是为了防止刷新页面或图片更改时图片不更新

背景图：

<div v-lazy:background-image="{src: url}"></div>

如果不想再loading或者error时显示兜底图片，可以分别设置样式代替：

<style>
  img[lazy=loading] { }
  img[lazy=error] { }
  img[lazy=loaded] { }
</style>

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/6568