vue-lazyload :一个简单易用的 Vue 图片延迟加载插件

介绍: vue-lazyload主要应用于图片延迟加载。包含如下的特点:

  • 小巧轻便,功能强大,易于使用
  • 可以用于加载任何图像类型
  • 支持Vue 1.0和Vue 2.0

理解图片延迟加载:

当某个网页中呈现的图片较多时,由于网络等原因,访问该网页时,所有的图片不会立马全部进行显示出来,会出现一定的网络延迟加载的现象,影响用户体验;但我们可以vue-lazyload插件来实现在图片加载的过程中,先显示出默认的加载图片,直到图片完全显示,默认图片消失,这样就会大大的提升用户体验。

使用方法如下:

1、通过npm安装

npm install vue-lazyload -s
复制代码

2、在main.js中进行引用

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预压高度的比例
  error: '../assets/img/no-pic.png', // 图像的加载失败时 显示的error图标
  loading: '../assets/imgLoading.png', // 图像正常加载时 显示的loading图标
  attempt: 1 // 图像尝试加载 次数
})

复制代码

3、在组件中使用

<img v-lazy="item.picUrl" alt="">


图片地址就是item.picUrl,一般写接口中拿到的图片地址变量

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值