使用 vant 的 v-lazy 實現圖片 vue 在移動端的懶加載

官方文檔：https://youzan.github.io/vant/#/zh-CN/lazyload

引入

Lazyload 是 Vue 指令，使用前需要對指令進行注冊

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

// options 為可選參數，無則不傳
Vue.use(Lazyload, options);

基本用法

將v-lazy指令的值設置為你需要懶加載的圖片

<img v-for="img in imageList" v-lazy="img" >
export default {
  data() {
    return {
      imageList: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ]
    };
  }
}

背景圖懶加載

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

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

組件懶加載

將需要懶加載的組件放在 lazy-component 標簽中，即可實現組件懶加載

// 注冊時設置`lazyComponent`選項
Vue.use(Lazyload, {
  lazyComponent: true
});
<lazy-component>
  <img v-for="img in imageList" v-lazy="img" >
</lazy-component>

API

---

更多內容請參照：vue-lazyload 官方文檔