Lazyload 懒加载

引入

Lazyload 是 Vue 指令，使用前需要对指令进行注册。

import Vue from 'vue';
import Lazyload from '@ophiuchus/lazyload';

Vue.use(Lazyload);

// 注册时可以配置额外的选项
Vue.use(Lazyload, {
  lazyComponent: true,
});

代码演示

基础用法

将 v-lazy 指令的值设置为你需要懒加载的图片。

<img v-for="img in imageList" v-lazy="img" />

export default {
  data() {
    return {
      imageList: [
        'https://img4.tuhu.org/JU_d6bTpbt6kxlAcmNKCew_w660_h520.jpeg',
        'https://img4.tuhu.org/4sVmt9tW6ZR89aBswsUhfA_w1600_h1295.jpeg',
      ],
    };
  },
};

背景图懒加载

和图片懒加载不同，背景图懒加载需要使用 v-lazy:background-image，值设置为背景图片的地址，需要注意的是必须声明容器高度。

<div v-for="img in imageList" v-lazy:background-image="img" />

组件懒加载

将需要懒加载的组件放在 lazy-component 标签中，即可实现组件懒加载。

// 注册时设置`lazyComponent`选项
Vue.use(Lazyload, {
  lazyComponent: true,
});

<lazy-component>
  <img v-for="img in imageList" v-lazy="img" />
</lazy-component>

API

Options

| 参数 | 说明 | 类型 | 默认值 | | ------------- | ---------------- | ---------- | ---------- | | loading | 加载时的图片 | string | - | | error | 错误时的图片 | string | - | | preload | 预加载高度的比例 | string | - | | attempt | 尝试次数 | number | 3 | | listenEvents | 监听的事件 | string[] | scroll等 | | adapter | 适配器 | object | - | | filter | 图片 URL 过滤 | object | - | | lazyComponent | 是否能懒加载模块 | boolean | false |

更多内容请参照：vue-lazyload 官方文档