Lazyload 图片懒加载

使用指南

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

  1. import Vue from 'vue';
  2. import { Lazyload } from 'vant';
  3. // options 为可选参数,无则不传
  4. Vue.use(Lazyload, options);

代码演示

基础用法

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

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

背景图懒加载

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

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

懒加载模块

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

  1. <lazy-component>
  2. <img v-for="img in imageList" v-lazy="img" >
  3. </lazy-component>

Options

参数说明类型默认值版本
loading加载时的图片String--
error错误时的图片String--
preload预加载高度的比例String--
attempt尝试次数Number3-
listenEvents监听的事件Arrayscroll-
adapter适配器Object--
filter图片 URL 过滤Object--
lazyComponent是否能懒加载模块Booleanfalse-

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

原文: https://youzan.github.io/vant/#/zh-CN/lazyload