import{o as a,a as t,y as n}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},l=n(`

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

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://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
        'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      ],
    };
  },
};

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

`,9),o=[l],h={__name:"README",setup(p,{expose:s}){return s({frontmatter:{}}),(c,r)=>(a(),t("div",e,o))}};export{h as default};