Vant Lazyload 圖片懶加載

引入

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

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

Vue.use(Lazyload);

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

代碼演示

基礎(chǔ)用法

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

<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?，值設(shè)置為背景圖片的地址，需要注意的是必須聲明容器高度。

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

組件懶加載

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

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

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

API

Options

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