v-lazy图片懒加载

摘要：安装插件npm install vue-lazyload --save；在main.js文件中注册插件。配置参数：preLoad提前加载高度（数字 1 表示 1 屏的高度）、error图片加载失败时显示的图片

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')  //加载失败图片
});

配置参数：

key	description	default
preLoad	提前加载高度（数字 1 表示 1 屏的高度）	1.3
error	图片加载失败时显示的图片	'data-src'
loading	图片加载状态下显示的图片	'data-src'
attempt	加载错误后最大尝试次数	3
listenEvents	监听事件	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']`
adapter	动态修改元素属性	{ }
filter	图片监听过滤	{ }
lazyComponent	组件懒加载	false
dispatchEvent	触发元素状态监听事件（error, loaded, rendered）	false

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://shenqiku.cn/article/FLY_6568