Lazyload 懒加载

引入

LazyloadVue 指令,使用前需要对指令进行注册。

  1. import Vue from 'vue';
  2. import { Lazyload } from 'vant';
  3. Vue.use(Lazyload);
  4. // 注册时可以配置额外的选项
  5. Vue.use(Lazyload, {
  6. lazyComponent: true,
  7. });

代码演示

基础用法

v-lazy 指令的值设置为你需要懒加载的图片。

  1. <img v-for="img in imageList" v-lazy="img" />
  1. export default {
  2. data() {
  3. return {
  4. imageList: [
  5. 'https://img01.yzcdn.cn/vant/apple-1.jpg',
  6. 'https://img01.yzcdn.cn/vant/apple-2.jpg',
  7. ],
  8. };
  9. },
  10. };

背景图懒加载

和图片懒加载不同,背景图懒加载需要使用 v-lazy:background-image,值设置为背景图片的地址,需要注意的是必须声明容器高度。

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

组件懒加载

将需要懒加载的组件放在 lazy-component 标签中,即可实现组件懒加载。

  1. // 注册时设置`lazyComponent`选项
  2. Vue.use(Lazyload, {
  3. lazyComponent: true,
  4. });
  1. <lazy-component>
  2. <img v-for="img in imageList" v-lazy="img" />
  3. </lazy-component>

API

Options

参数说明类型默认值
loading加载时的图片string-
error错误时的图片string-
preload预加载高度的比例string-
attempt尝试次数number3
listenEvents监听的事件string[]scroll
adapter适配器object-
filter图片 URL 过滤object-
lazyComponent是否能懒加载模块booleanfalse

更多内容请参照:vue-lazyload 官方文档

Lazyload 懒加载 - 图1