Lazyload 图片懒加载

使用指南

组件介绍

Lazyload 是 Vue 指令，使用前需要对指令进行注册

引入方式

import Vue from 'vue';
import Lazyload from 'vue-lazyload';
Vue.use(Lazyload, {
  lazyComponent: true,
  //失败时显示 (可以自定义)
  error: 'https://nuofe.nntest.cn/feart/images/demoimgs/404.png',
  //loading图(可以自定义)
  loading: 'https://nuofe.nntest.cn/feart/images/demoimgs/loading.gif',
});

代码演示

基础用法

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

懒加载背景图

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

  <div v-for="img in backgroundImageList" class='lazyback' v-lazy:background-image="img" :key='img'></div>

懒加载模块

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

  <lazy-component>
     <img v-for="img in moduleList" v-lazy="img"  :key='img' >
  </lazy-component>

API

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