vue2-lazy

A vue lazy load image component

demo

Build Setup

# install dependencies
npm i vue2-lazy -s || yarn add vue2-lazy

---

// main.js
import Vue from 'vue'
import lazyLoad from 'vue2-lazy'
import ERRIMAGE from 'path/to/err.png'

const option = {
  aspectRatio: 1, // 默认图片宽高比
  err: ERRIMAGE,  // 默认加载错误图
  loadTime: 1000  // 默认加载时机
}
Vue.use(lazyLoad， option) // 建议传递option对象 适配项目

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

---

 <!-- app.vue -->
<template>
  <div id="app">
    <someThingYourComponents/>
    <!-- 建议全局修改默认aspectRatio -->
    <lazyLoad src="path/to/image.png"/>
    <!-- slot自定义loading -->
    <lazyLoad src="https://img.mukewang.com/5ad015060001608909360316.jpg">
      <span slot="icon">hello</span>
    </lazyLoad>

  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

---

props

name	desc	type	default	required
aspectRatio	宽高比	Number	1	false
src	目标图片src	String	''	true
err	请求图片错误展示图	String(url		base64)
loadTime	异步请求图片延迟	Number(ms)	1000	false

event

name	desc	prams
err	图片加载错误	错误原因

slot

name	desc	tips
icon	loading 组件	需要自己写动画

option

name	desc	recommend
aspectRatio	重写props默认宽高比	true
err	重写props错误图片	true
loadTime	重写props异步加载时机	true

Tips

1. 强烈建议传递aspectRatio 可以更好适配布局，不会引起重流
2. Vue.use(lazyLoad, option) 可以传递option对象 重写 props default 修改全局默认图片宽高比， 错误展示图， 图片延迟
3. 通过slot icon 插槽 自定义 loading动画

TODO

[ x ] demo演示 [ ] 多种load效果 [ x ] 自定义load(slot) [ ] 解决向上滚动 懒加载