Vant Lazyload picture lazy load

Introduced

Lazyload a Vue directive that needs to be registered before it can be used

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

Vue.use(Lazyload);

// 注册时可以配置额外的选项
Vue.use(Lazyload, {
  lazyComponent: true
});

Code demo

Basic usage

Set the v-lazy instruction to the picture that you need to lazy load

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

The background map is lazy to load

In addition to picture lazy loading, background lazy loading v-lazy: background-image the value is set to the address of the background picture, it is important to note that the container height must be declared.

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

The component is lazy to load

You can do lazy loading by putting components that need to be lazy-loaded in the lazy-component label.

// 注册时设置`lazyComponent`选项
Vue.use(Lazyload, {
  lazyComponent: true
});

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

Api

Options

For more information, please refer to the official vue-lazyload documentation