vant/docs/examples-docs/lazyload.md

Lazyload 图片懒加载

使用指南

Lazyload是Vue指令，所以需要使用它必须将它注册到Vue的指令中。

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

Vue.use(Lazyload, options);

代码演示

基础用法

比如商品详情页很多图片的情况需要对图片进行懒加载，只需将v-lazy指令的值设置为你需要懒加载的图片。

:::demo 基础用法

<ul class="image-list" ref="container">
  <li v-for="img in imageList">
    <img class="lazy-img" v-lazy="img">
  </li>
</ul>

<script>
export default {
  data() {
    return {
      imageList: [
        'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
        'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL',
        'https://img.yzcdn.cn/upload_files/2016/01/27/FpWD3kX18w8qjM6faH-4JqOWHsF4',
        'https://img.yzcdn.cn/upload_files/2016/09/08/9ff28d555e5760fa830344f12efa0087.jpg',
        'https://img.yzcdn.cn/upload_files/2016/11/13/FlZIeSgbSANSPkmUHttMjoIgY3cv.jpg',
        'https://img.yzcdn.cn/upload_files/2016/12/12/FuxgsGPRnupGu_eaMuaR8W0DuSKp.jpeg'
      ]
    };
  }
}
</script>

:::

背景图懒加载

和图片懒加载不同的背景图懒加载需要使用v-lazy:background-image，值设置为背景图片的地址。还有一个需要注意的是你需要设置容器的样式，否则高度不会撑开。

:::demo 背景图懒加载

<ul class="image-list" ref="container">
  <li v-for="img in backgroundImageList">
    <div class="lazy-background" v-lazy:background-image="img"></div>
  </li>
</ul>

<script>
export default {
  data() {
    return {
      backgroundImageList: [
        'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
        'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
      ]
    };
  }
}
</script>

:::

懒加载模块

懒加载模块需要使用到lazy-component，将需要懒加载的内容放在lazy-component中即可。

:::demo 懒加载模块

<lazy-component @show="handleComponentShow">
  <ul class="image-list">
    <li v-for="img in componentImageList">
      <img class="lazy-img" v-lazy="img">
    </li>
  </ul>
</lazy-component>

<script>
export default {
  data() {
    return {
      componentImageList: [
        'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
        'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
      ]
    };
  },

  methods: {
    handleComponentShow() {
      console.log('component show');
    }
  }
}
</script>

:::

Options

参数	说明	类型	默认值	可选值
loading	加载时的图片	string
error	错误时的图片	string
preload	预加载高度的比例	string
attempt	尝试次数	number	3
listenEvents	监听的事件	Array	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']
adapter	适配器	Object
filter	图片url过滤	Object
lazyComponent	是否能懒加载模块	boolean	false