泉州市圣盈商贸有限公司

今天小编跟大家讲解下有关v-lazy图片懒加载 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关v-lazy图片懒加载 的相关资料，希望小伙伴们看了有所帮助。

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

配置参数：

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

3、v-lazy有三种状态

lazy=loadedlazy=errorlazy=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>

来源：爱蒂网