Lazyload 图片懒加载

引入

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

import Vue from 'vue';
import { Lazyload } from 'vant';
// options 为可选参数，无则不传
Vue.use(Lazyload, options);

代码演示

基础用法

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

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

export default {
  data() {
    return {
      imageList: [
        'https://img.yzcdn.cn/1.jpg',
        'https://img.yzcdn.cn/2.jpg'
      ]
    };
  }
}

背景图懒加载

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

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

懒加载模块

懒加载模块需要使用到lazy-component，将需要懒加载的内容放在lazy-component中即可。

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

API

Options

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