Lazyload 懒加载

main.js

import Vue from "vue";
import { Lazyload } from "feui";
Vue.use(Lazyload, {
  lazyComponent: true,
  //失败时显示
  error: "https://i.loli.net/2018/01/29/5a6e858413275.png",
  //loading图
  loading: "https://i.loli.net/2018/01/29/5a6e858463317.gif"
});

pages

img,
div[lazy] {
  padding: 15px;
  width: 100%;
  margin: 10px 0 0;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  background-size: 315px 250px;
  background-position: 15px;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.lazyback {
  height: 300px;
}

data () {
  return {
    imageList: [
      'https://i.loli.net/2018/01/22/5a657b6d542d4.jpg',
      'https://i.loli.net/2018/01/22/5a657b718c766.jpg',
      'https://i.loli.net/2018/01/22/5a657b7140692.jpg',
      'https://i.loli.net/2018/01/22/5a657b62a72bb.jpg'
    ],
    backgroundImageList: [
      'https://i.loli.net/2018/01/29/5a6e94028cdd0.jpg',
      'https://i.loli.net/2018/01/29/5a6e9402daf3a.jpg',
      'https://i.loli.net/2018/01/29/5a6e94051e657.jpg'
    ],
    componentImageList: [
      'https://i.loli.net/2018/01/22/5a657b6118e21.jpg',
      'https://i.loli.net/2018/01/22/5a657b62f3c8b.jpg'
    ]
  }
}

基础用法

<fe-group title="iPad Pro">
  <img v-for="img in imageList" v-lazy="img" :key='img'  />
</fe-group>

懒加载背景图

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

懒加载背景图

<fe-group title="MacBook Pro">
  <lazy-component>
    <img v-for="img in componentImageList" v-lazy="img" :key='img' />
  </lazy-component>
</fe-group>

API

该组件详细文档,请移步vue-lazyload 文档