Vant4 Lazyload 懶加載

介紹

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

引入

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

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

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

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

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

代碼演示

基礎(chǔ)用法

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

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

背景圖懶加載

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

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

組件懶加載

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

// 注冊時(shí)設(shè)置`lazyComponent`選項(xiàng)
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 時(shí)，沒有自動注冊 Lazyload 組件？

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

const app = Vue.createApp();

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