vant/src/lazyload

Lazyload

Intro

When the page needs to load a large amount of content, delay loading the content outside the visible area of the page to make the page load smoother.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

const app = createApp();
app.use(Lazyload);

// with options
app.use(Lazyload, {
  lazyComponent: true,
});

Usage

Basic Usage

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

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

Lazyload Background Image

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

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

Lazyload Component

// set `lazyComponent` option
app.use(Lazyload, {
  lazyComponent: true,
});

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

API

Options

Attribute	Description	Type	Default
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	string[]	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