jquery 图片懒加载插件_轻量级 Vue 图片懒加载组件Vue-Lazyload

本文分享了Vue.js图片延迟加载组件VueLazyload,它基于Vue封装,github星数达6.4K+,完美支持主流浏览器,能带来流畅加载速度并减轻服务器负载。还介绍了其安装、引入、使用组件、组件参数等内容,提供演示示例及仓库地址。

今天给大家分享一个超极致的Vue.js图片延迟加载组件VueLazyload。

388bd79d68ad5bcf9be990a3ac7cfb16.png

vue-lazyload 基于Vue封装的图片懒加载组件。github ★ 高达6.4K+,完美支持主流浏览器,流畅的加载速度和减轻服务器负载。

83456ba4c50db3fa83ff8427758757a9.gif

安装

$ npm i vue-lazyload -S

引入

# 在main.js中引入import Vue from 'vue'import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// or with optionsVue.use(VueLazyload, {  preLoad: 1.3,  error: 'assets/error.png',  loading: 'assets/loading.gif',  attempt: 1,  // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']  listenEvents: [ 'scroll' ]})

使用组件

img1.jpgimg2.jpgimg3.jpg

组件参数

871cded9694f02490e5cfb1aa5dd3bd8.png

提供精美的演示示例

b6017e6dbad2ee759ba16b233726e063.png
55142b72c0ca3233dfede1c82592d805.png

附上demo示例及仓库地址

# 演示地址http://hilongjw.github.io/vue-lazyload/# 仓库地址https://github.com/hilongjw/vue-lazyload

好了,就介绍到这里。小伙伴们如果其他的Vue懒加载组件,欢迎一起交流讨论哈!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值