Vue-lazyload 的使用

Vue 项目使用 Vue-lazyload 做图片懒加载。

下载

下载 Vue-lazyload 的包
NPM包

npm install vue-lazyload --save

 

引入

在项目 main.js中通过 import 引入

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

 

配置属性

Vue.use( VueLazyload, {
  preLoad: 1.3,
  error: require('@/assets/loding@3x.png'),
  loading: require('@/assets/loding@3x.png'),
  attempt: 1
})

 

官方 Api

属性描述默认选项
preLoad预加载高度的比例1.3Number
error图片加载失败后'data-src'String
loading图像正在加载时'data-src'String
attempt尝试次数3Number
listenEvents需要监听的事件['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']所需监听的事件
adapter动态修改元素的属性{ }元素适配器
filter图像的 src 过滤器{ }图像 url 过滤器
lazyComponentlazyload 组件false懒加载组件

 

示例

使用 v-lazy 指令

<div class="main">
  <div class="list" v-if="list.length > 0" v-for="(item, index) of list" :key="index" @click="goInfo(index, item.url_address)">
    <div class="img">
      <img v-lazy="item.img_url" alt="">
    </div>
    <p class="txt" v-text="item.title"></p>
  </div>
  <div class="noMore">已经到底啦~</div>
  <p class="list" v-if="list.length<=0">活动筹备中...</p>
</div>

转载于:https://www.cnblogs.com/evenyao/p/9902262.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值