Lazyload - Vant 4

Lazyload

🚀 Boost your app's performance with intelligent lazy loading that delivers lightning-fast user experiences!

📖 Intro

Transform your app's performance with smart lazy loading! When your page contains heavy content, Lazyload intelligently defers loading images and components until they're actually needed, creating buttery-smooth scrolling experiences and dramatically reducing initial load times.

📦 Install

Get started in seconds! Register Lazyload globally via app.use and unlock powerful performance optimizations. Check out our Component Registration guide for additional setup options.

import { createApp } from'vue'; import { Lazyload } from'vant'; const app = createApp(); app.use(Lazyload); // with options app.use(Lazyload, { lazyComponent: true, });

🎨 Usage

Discover the power of intelligent loading with these practical examples

🌟 Basic Usage

exportdefault { 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

Create stunning visual experiences with lazy-loaded backgrounds! Use v-lazy:background-image to efficiently load background images while maintaining smooth scrolling. Remember to declare the container height for optimal rendering.

🧩 Lazyload Component

Take lazy loading to the next level with component-level optimization! Enable component lazy loading to defer entire Vue components until they enter the viewport, perfect for heavy widgets and complex UI sections.

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

🔧 API

Fine-tune your lazy loading experience with powerful configuration options

🎛️ Options

Customize every aspect of lazy loading behavior to match your app's specific needs

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	number	-
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

📚 Related Docs

Explore related components and features to enhance your development experience

• 🖼️ Image - Display images with lazy loading support
• 📋 List - Infinite scrolling lists with lazy loading
• 📖 Quick Start - Get started with Vant
• ❓ FAQ - Common questions and solutions