Lazyload 图片懒加载

效果

使用方法

<template>
  <div>
    <lc-title title="图片懒加载"></lc-title>
    <div class="lazyloadDemo">
        <category title="基础使用"></category>
        <img v-lazy="imageArray[0]" />

        <category title="背景图懒加载"></category>
        <div v-lazy:background-image="imageArray[1]"></div>

        <category title="懒加载模块"></category>
        <lazy-component>
        <img :src="imageArray[2]" />
        </lazy-component>
    
        <category title="错误、加载中 图片设置"></category>
        <div v-lazy:background-image="imgObj"></div>
    </div>
    
  </div>
</template>

<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
  components: { LcTitle, Category },
  data() {
    return {
      imgObj: {
        src: "http://error.png",
        error: 'http://img12.360buyimg.com/imagetools/jfs/t1/75933/12/14706/2086/5dc142e4E62f88e83/2d68d4d25d87faa4.png',
        loading: 'http://img12.360buyimg.com/imagetools/jfs/t1/73967/28/14561/916/5dc142e4E0666555b/bf33454553c6035e.png'
      },
      imageArray: [
        "http://m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg",
        "http://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png",
        "http://m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg"
      ]
    };
  }
};
</script>
<style lang="less" scoped>

</style>

可配置参数

字段	说明	类型	默认值
loading	加载时的图片	String	-
error	错误时的图片	String	-

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