Vue2图片懒加载（vue-lazyload）

参考文档：vue-lazyload

安装插件

npm install vue-lazyload
# or
yarn add vue-lazyload
# or
pnpm add vue-lazyload

使用

使用方式 一：

所有懒加载图片的占位图使用同一张默认图片

1. 引入并注册

// main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload) // 注册方式一，使用默认配置
Vue.use( // 注册方式二，自定义配置相关图片和监听方法类型
  VueLazyload,
  {
    preLoad: 1.3, // 默认 1.3
    error: require('./assets/images/default.png'),
    loading: require('./assets/images/default.png'), // ../dist/default.png
    attempt: 1, // 默认 3
    // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
    listenEvents: ['scroll']
  }
)

1. 在页面中使用

• 在 img 标签中使用懒加载，将 src 替换为 v-lazy，需要动态切换图片时，务必添加 key 属性

<img v-lazy="src" :key="src" class="u-img" />

• 在 background 背景图中使用懒加载，v-lazy:background-image

<div v-lazy:background-image="src" :key="src" class="u-bg"></div>

使用方式 二：

不同页面的懒加载使用不同的默认图

1. 引入并注册

// main.js
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
  preLoad: 1.3,
  attempt: 1
})

1. 在页面中使用

• 在 img 标签中使用懒加载，同时自定义默认图

<img v-lazy="getDefault(src)" :key="src" :alt="title" class="u-img"/>

getDefault (src) {
  return {
    src: src,
      error: require('../assets/images/defaultNews.png'),
      loading: require('../assets/images/defaultNews.png')
  }
}

• 在 background 背景图中使用懒加载，同时自定义默认图

<a v-lazy:background-image="getDefault(src)" :key="src" class="u-img"></a>

// 自定义使用的默认图
getDefault (src) {
  return {
    src: src,
    error: require('../assets/images/defaultLogo.png'),
    loading: require('../assets/images/defaultLogo.png') // 指定相应要使用的默认图
  }
}

• 默认图使用网络图片 https

<img v-lazy="imgObj"/>
<div v-lazy:background-image="imgObj"></div>

imgObj: {
  src: 'http://xx.com/logo.png',
  error: 'http://xx.com/error.png',
  loading: 'http://xx.com/loading-spin.svg'
}