Vue-lazyload 的使用

Posted evenyao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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/[email protected]),
  loading: require(‘@/assets/[email protected]),
  attempt: 1
})

 

官方 Api

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

以上是关于Vue-lazyload 的使用的主要内容,如果未能解决你的问题,请参考以下文章

Vue图片懒加载vue-lazyload-使用

Vue图片懒加载vue-lazyload-使用

vue-lazyload简单使用

nuxt 使用vue-lazyload

vue-lazyload图片懒加载的简单使用

vue-lazyload 图片懒加载