vue-lazyload — 懒加载图片和组件

仅支持 Vue2，不支持 Vue3

安装依赖包

npm i vue-lazyload -S

在 main.js 使用插件

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度的比例
  error: require('./assets/error.gif'),
  loading: require('./assets/loading.gif'),
  attempt: 2, // 尝试次数
})

在组件中使用

<template>
<div>
  <!-- 懒加载图片 -->
  <ul>
    <li v-for="item in imgList" :key="item">
      <img v-lazy="item" alt="" />
    </li>
  </ul>

  <!-- 懒加载背景 -->
  <ul>
    <li v-for="item in imgList" :key="item" v-lazy:background-image="item"></li>
  </ul>
</div>
</template>

export default {
  data() {
    return {
      imgList: [
        'https://xxx/assets/img/1.jpg',
        'https://xxx/assets/img/1.jpg',
        'https://xxx/assets/img/1.jpg',
        'https://xxx/assets/img/1.jpg',
        'https://xxx/assets/img/1.jpg',
        'https://xxx/assets/img/1.jpg',
        'https://xxx/assets/img/1.jpg',
        'https://xxx/assets/img/1.jpg',
        'https://xxx/assets/img/1.jpg',
      ]
    };
  },
};
</script>