vant/docs/examples-docs/en-US/lazyload.md

Lazyload

Install

import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload, options);

Usage

Basic Usage

:::demo Basic Usage

<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'
      ]
    };
  }
}

:::

Background Image

Use v-lazy:background-image to set background url, and declare the height of the container.

:::demo Background Image

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

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

:::

Lazyload Component

:::demo Lazyload Component

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

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

:::

Options

Attribute	Description	Type	Default	Accepted Values
loading	Src of the image while loading	String	-	-
error	Src of the image upon load fail	String	-	-
preload	Proportion of pre-loading height	String	-	-
attempt	Attempts count	Number	3	-
listenEvents	Events that you want vue listen for	Array	scroll...	-
adapter	Dynamically modify the attribute of element	Object	-	-
filter	The image's listener filter	Object	-	-
lazyComponent	Lazyload component	Boolean	false	-

See more： vue-lazyload