介紹

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

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

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

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

// 注冊(cè)時(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)組件懶加載。

// 注冊(cè)時(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)容請(qǐng)參照：vue-lazyload 官方文檔

常見(jiàn)問(wèn)題

通過(guò) CDN 引入 Vant 時(shí)，沒(méi)有自動(dòng)注冊(cè) Lazyload 組件？

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

const app = Vue.createApp();

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