文章82
标签28
分类8

vue-lazyload图片懒加载

Vue模块,用于在应用程序中延迟加载图像

安装

npm i vue-lazyload -S
// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  loading: require('这里是写图片路径')
})

基本用法

// old ==> :src
<li v-for="item in discList" :key="item.listennum">
    <img width="60" height="60" :src="item.imgurl">
</li>
// new ==> v-lazy
<li v-for="item in discList" :key="item.listennum">
    <img width="60" height="60" v-lazy="item.imgurl">
</li>

简便的用法,只需要将原来的 :src 改为 v-lazy 就完成了替换。

常用 API

属性 说明 类型 默认
preLoad 预加载高度的比例 Number 1.3
error 加载失败后图像的路径 String data-src
loading 加载时图像的路径 String data-src
attempt 重试次数 Number 3
listenEvents 监听事件 详细说明 ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']