Vant3 Lazyload 懶加載

介紹

當(dāng)頁面需要加載大量內(nèi)容時，使用懶加載可以實(shí)現(xiàn)延遲加載頁面可視區(qū)域外的內(nèi)容，從而使頁面加載更流暢。

實(shí)例演示

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

Lazyload 是 Vue 指令，使用前需要對指令進(jìn)行注冊。

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

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

// 注冊時可以配置額外的選項
app.use(Lazyload, {
  lazyComponent: true,
});

代碼演示

基礎(chǔ)用法

將 v-lazy 指令的值設(shè)置為你需要懶加載的圖片。

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

背景圖懶加載

和圖片懶加載不同，背景圖懶加載需要使用 v-lazy:background-image，值設(shè)置為背景圖片的地址，需要注意的是必須聲明容器高度。

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

組件懶加載

將需要懶加載的組件放在 lazy-component 標(biāo)簽中，即可實(shí)現(xiàn)組件懶加載。

// 注冊時設(shè)置`lazyComponent`選項
app.use(Lazyload, {
  lazyComponent: true,
});

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

API

Options

更多內(nèi)容請參照：vue-lazyload 官方文檔

常見問題

通過 CDN 引入 Vant 時，沒有自動注冊 Lazyload 組件？

由于 Lazyload 組件在注冊時可以傳入一些配置項，所以我們不會自動注冊 Lazyload 組件，需要手動進(jìn)行注冊：

const app = Vue.createApp();

app.use(vant.Lazyload, {
  lazyComponent: true,
});