基于Vue的懒加载图片，懒加载模块

懒加载在日常工作中是相当的常用的，这里介绍一个简单的会用方法，原理就不赘述了，网上有很多经验和demo，也方便自己以后使用。
这是一个比较简介和方便的库,直接用v-lazy替换原本的src即可

<img v-lazy="img.src" >

开始使用

安装

npm i vue-lazyload -S

在根目录下的main.js中

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

// 使用默认参数
Vue.use(VueLazyload)

// 自己配置参数
Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载高度的比例
  error: 'dist/error.png', // 加载失败图片
  loading: 'dist/loading.gif', // 加载中图片
  attempt: 3, // 尝试加载次数
  // 不常用参数的一些说明
  // 懒加载模块，滚动到对应视图区域之前才加载该模块，模块内容较多时不推荐使用
  // 加载速度可能会为用户带来不好的体验，适用于一些信息模块，或者一些非主体模块，适用于少部分用户关注的模块
  lazyComponent: true
  // 默认的方法有['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
  listenEvents: ['scroll'],
  adapter: {
    loaded({bindType,el,naturalHeight,naturalWidth,$parent,src,loading,error,Init}) {
      // 加载完成之后的回调方法
    },
    loading(listender, Init) {
      console.log('正在加载')
    },
    error(listender, Init) {
      // 加载错误之后的回调方法
    }
  },
  // 每次加载都会执行filter中的方法，参数为listener, options
  filter: {
    progressive(listener, options) {
      const isCDN = /qiniudn.com/
      if (isCDN.test(listener.src)) {
        // 如果图片是从七牛云得到，就修改loading的默认图片
        listener.loading = listener.src + '?imageView2/1/w/10/h/10'
      }
    },
    webp(listener, options) {
      if (!options.supportWebp) return const isCDN = /qiniudn.com/
      if (isCDN.test(listener.src)) {
        // 满足webp条件就加载webp格式的图片
        listener.src += '?imageView2/2/format/webp'
      }
    }
  }
})

new Vue({
  el: 'body',
  components: {
    App
  }
})

组件内使用

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

<img v-lazy="img.src" />


/*懒加载模块*/
<lazy-component @show="handler">
  <div>模块内容</div>
</lazy-component>

<script>
  {
    ...
    methods: {
      handler (component) {
        console.log('加载完该模块的回调')
      }
    }

  }
</script>

参数说明

参数	说明	类型	默认值
loading	加载时的图片	String	-
error	加载错误时的图片	String	-
preload	预加载高度时的比例	String	-
attempt	请求图片错误时，尝试次数	Number	-
listenEvents	监听的事件	Array	scroll等
adapter	适配器	Object	-
filter	图片url过滤	Object	-
lazyComponent	是否能懒加载模块	Boolean	false